JS之 实现base64图片上传(多图上传)

我的预览照片 在 提交按钮下方，请自己优化页面效果

html 中

<style>

/* //这是一个用做回显的盒子的样式*/
.pic{
    width: 100px;
    height: 100px;
}

.pic img {
    width:80px;
    height:100px;
    /*margin-left:-175px;*/
    margin-bottom:20px;
}

.btn img{
    width:80px;
    height:100px;
    /*margin-left:20px;*/
    margin-bottom:20px;
}

.btn-primary img{
    width:80px;
    height:100px;
    /*margin-left:20px;*/
    margin-bottom:20px;
}

.position {
    position: relative;
    /*margin-top: -70px;*/
    margin-left: 50px;
}

.dd{
    /*margin-top: -70px;*/

    position: relative;
    margin-left: 50px;
    display: inline-block;
    padding: 6px 12px;
    /*margin-bottom: 0;*/
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
   
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.dd img{
      width:80px;
      height:100px;
      margin-bottom:20px;
}
</style>
<form class="form-horizontal m-t" id="signupForm">
   <input   class="form-control" id="uid" value="{$data['id']}" type="hidden">
           <!-- 下面是做多图片上传的 -->
           <div class="form-group">
               <label class="col-sm-3 control-label-left">修改图片：</label>
               <div class="col-sm-8">
                   <div class="row">
                       <div class="col-md-6">
                           <div class="image-crop" style="margin-bottom:-20px;">
                               {volist name="pic" id="v"}
       
                                   <img class="img" style="width:64px;height:64px;" src="{$v}">

                               {/volist}
                           </div>
                       </div>
                       <div class="col-md-6" style="margin-top:70px;margin-left:10px;">
                           <h4>图片预览：</h4>
                           <p></p>
                           <div class="btn-group">
                               <label title="上传图片" for="inputImage" class="btn btn-primary">
                                   <div id="dd"></div>
                                   <!--用input标签并选择type=file，记得带上multiple，不然就只能单选图片了-->
                                   <input id="files" name="avatar" type="file" value="选择" onchange="changeImge(this)" multiple/>
                                   <input id="successimg" type="hidden" value="" >
                               </label>       
                           </div>
                       </div>
                   </div>
               </div>
           </div>

           <div class="form-group">
               <div class="col-sm-8 col-sm-offset-3">
                   <button class="btn btn-primary" id="edit" type="submit">提交</button>
               </div>
           </div>
 </form>

Js 中

<script type="text/javascript">


var submitArr = [];        // 全局
var alld = [];
function changeImge(obj) {

    // obj.files 是所有上传的图片，带下标的是其中一张图片
    var allf = obj.files;   // 所有上传文件
    var filePath = obj;

    // 设置不能上传同一张照片
    if (submitArr[0]) {
        // console.log('已有图片，第二次添加');
        for (var i = 0; i < allf.length; i++) {
       
            var type = allf[i].type;
            var size = allf[i].size;
            var tp = type.split("/")[0];

            if (tp != "image" || size > 10*1024*1024){
                alert("请选择图片-10MB内！")
                return false;
            }

            // 下面是去除重复照片的
            var bool = true;
            for (var j = 0; j < submitArr.length; j++) { 
                if(submitArr[j]['name']==allf[i]['name']){ 
                    // delete(allf[i]);     // 重复的元素就不加入对象
                    bool = false;
                    var re = document.getElementsByClassName('dd');
                    re[reind].remove();      // 不显示重复照片
                    alert("图片已存在！");
                    return;
                }
            }

            if(bool){
                submitArr.push(allf[i]);
            }
        }
        // console.log(submitArr);
    }else{
        // console.log('没有图片，第1次添加');
        for (var i = 0; i < allf.length; i++) {
       
            var type = allf[i].type;
            var size = allf[i].size;
            var tp = type.split("/")[0];

            if (tp != "image" || size > 10*1024*1024){
                alert("请选择图片-10MB内！")
                return false;
            }
            submitArr.push(allf[i]);
        }
        // console.log(submitArr);
    }

    
    //3、回显，这样显示在下面了
    $.each(submitArr,function(key,value){
        //每次都只会遍历一个图片数据
        var div = document.getElementById("dd"),
            img = document.createElement("img");

        div.className = "btn btn-primary position";   // 新建div class

        var dd = document.getElementById("dd");
        dd.innerHTML = "";
        var fr = new FileReader();
        fr.onload = function(){          
            dd.innerHTML += '<div class="dd"><div class="delete" onclick="mydel('+key+')">delete</div><img src="'+this.result+'" alt=""/></div>';
            document.body.appendChild(dd);
        }
        fr.readAsDataURL(value);


// 下面是转成base64格式的
       var blobToBase64=function(blob, callback) {
            var a = new FileReader();
            a.onload = function(e) {
                callback(e.target.result);
            }
            a.readAsDataURL(blob);
        };

        //使用方法,传入一个blob数据,在回调中接收处理成功的图片url
        blobToBase64(value, function(data) {
            alld.push(data);
        });

// 第二种方法，必须在提交之前提前处理数据，不然alld为null,
// 因为 reader.onload 会等待先执行下面的程序
 
        // var reader = new FileReader();    //新建一个FileReader
        // reader.readAsDataURL(submitArr[key]);   //读取文件,保存为base64 格式
        // reader.onload = function (evt) {        //读取完文件之后会回来这里
        //     imageString = evt.target.result;    // 这是 base64格式的链接
        //      alld.push(imageString);
        //      console.log('下面打印alld222');
        //      console.log(alld);
        // }
  

    })

}


// 和下面删除分开的  
  
function mydel(key){
    /*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/
    $.each(submitArr,function(keyy,valuee){
        if(keyy==key){
            // console.log('有相同下标');
            var re = document.getElementsByClassName('dd');
            re[keyy].remove();          // 移除页面图片元素
        }
    });
   delete(submitArr[key]);      
}


// 下面表单提交
$('#edit').on('click', function(){

    // console.log('看下面有没有alld');
    // console.log(alld);              // 所有图片，base64格式
    // return
    $.ajax({
        type: 'POST',
        url:  "/admin/question/editajax",
        data: {
            tupian: alld
        },
        dataType: 'json',
        success: function(data){
            if (data.status == 1) {
                alert("编辑成功");
                // window.location.href="admin_index";  // 跳转到后台主页
            } else {
                alert("编辑失败");
            }
        },
        error:function(data){
            console.log(data);
            alert(222);
        } 
    });
})



</script>

php 后台

和单张图片上传没区别，只要注意foreach时，

 $new_file = $new_file.time().$k.".{$type}";  
 
 //  不拼$k  会是相同名称，那样，无论几张图片，获得的都是同一个图片名称