JavaScript实现多张图片上传功能

今天闲着没事，把之前的多张图片上传代码整理了下。

页面主要代码：

<div class="upBox upBox2">
    <div class="d1">
        <a class="redA1 rightA" href="javascript:choosePhotos();" id="continue_add_button" style="display:none;">继续添加</a>
    </div>
    <div class="d2" id="add_photo_button">
        <a href="javascript:choosePhotos();" class="blueA1">从电脑上传照片</a>
        <p class="p1">注：支持JPG格式多张上传，按住Ctrl或Shift选择图片，一次最多可上传150张照片</p>
    </div>
    <input type="file" id="upload" accept="image/jpeg" multiple="multiple" style="display:none;" />
    <canvas id="myCanvas" style="display:none;"></canvas>
    <div class="d3">
        <ul class="ul1 clearfix" id="local_upload_div">
            
        </ul>
    </div>
</div>

js部分主要代码，其实不用html5的画布也行，不过貌似用画布页面加载比直接预览图较快。

具体上传代码没写，和单张上传是一样的，需要的朋友可以去我的另一篇写单张上传的博客里看一下：JavaScript实现单张图片上传功能

//准备上传的模板
var mb_upload = "<li id=\"up_li_INDEX\">"+
                    "<div>"+
                        "<div class=\"imgD\">" +
                            "<img id=\"up_img_INDEX\" src=\"/img/upload/morenI.png\" >"+
                        "</div>" +
                        "<p class=\"jdP\" id=\"up_p_INDEX\">" +
                            "<img class=\"i1\" src=\"/img/upload/loading.gif\">"+
                            "准备上传"+
                        "</p>" +
                    "</div>"+
                "</li>";

$(function(){
    //文件域改变时触发
    $('#upload').change(function (evt) {
          fileChange(evt);
    });
});

//触发文件域
function choosePhotos(){
    $("#upload").click();
}

//文件域改变时触发
function fileChange(evt){
    var files = evt.target.files;
    if(files.length == 0)return;
    //上传页面已有照片数量
    var up_page_num = $("#local_upload_div li").length;
    
    $("#add_photo_button").hide();
    $("#continue_add_button").show();
    
    layer.msg('照片加载中', {icon: 16});
    
    for(var m=0; m<files.length; m++){
        var f = files[m];
        console.log("type="+f.type+" name="+f.name+" length="+f.size);
        addPhoto(m+1+up_page_num);
    }
    getImagesInfo(files,0,up_page_num);
    
}

//页面添加等待上传的预显示图片
function addPhoto(i){
    var segment = mb_upload;
    segment = segment.replace(/INDEX/g,i);
    $("#local_upload_div").append(segment);
}

//获取到照片信息并在页面添加预览图
var getImagesInfo = function(files,a,up_page_num){
    
    if(files.length > a){
        
        usUploading = true;
        
        var f = files[a];
        
        ///var type = f.type;
        //获取容器
        var c = document.getElementById("myCanvas");
        //获取画布对象
        var cxt = c.getContext("2d");
        
        var reader = new FileReader();

        var name = f.name;//完整照片名称，带格式
        
        //异步方法，文件读取完毕才执行
        reader.onload = function(e){
            //图片的读取结果
            var dataImg = e.target.result;
            var img = new Image();
            //异步方法
            img.onload = function(){
                var ratio = img.width/img.height;
                var h,w;
                //等比例压缩宽和高
                if(ratio>1){
                    w = 110;
                    h = w*img.height/img.width;
                }else{
                    h = 110;
                    w = h*img.width/img.height;
                }
                //容器设置宽和高
                c.width = w;
                c.height = h;
                //清空容器
                cxt.clearRect(0, 0, w, h);
                //开始作画
                cxt.drawImage(img,0,0,w,h);
                //获取容器中画的url
                var compressed = c.toDataURL("image/jpeg");   
                
                //将预览图插入上传页面
                $("#up_img_"+(a+1+up_page_num)).attr("src",compressed);
                $("#up_img_"+(a+1+up_page_num)).show("slow");
                
                syncUpload(files,dataImg,a,name,up_page_num);
            };
            //将图片的读取结果赋到img对象的src属性上
            img.src = dataImg;
        };
        //将图片读取为URL数据:base64编码
        reader.readAsDataURL(f);
    }
}

//原图上传
var syncUpload = function(files,imgStr,index,name,up_page_num){
    
    sleep(1000);//延时1s，模拟ajax，O(∩_∩)O哈哈~
    
    //这里就是和单张上传逻辑一样了，只不过在上传成功后再次调用上面的方法，具体上传的方法就不写了
    $("#up_p_"+(index+1+up_page_num)).html("<img class=\"i1\" src=\"/img/upload/duihao2.png\">"+
                                            "上传成功"+
                                            "<a href=\"javascript:void(0);\" class=\"right\"><img class=\"i2\" src=\"/img/upload/shanI.gif\"></a>");
    
    getImagesInfo(files,++index,up_page_num);
    
};

//设置延时函数
function sleep(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime)return;
    }
}

看看基本效果O(∩_∩)O：