<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>

 //准备上传的模板

 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;

     }

 }