html5 多图预览

html5 多图预览

 

如何实现呢?

页面加载完成之后,绑定事件下载 :

Js代码   

1. //预览图片,没有真正上传  
2.            com.whuang.hsj.previewLocalDiskImageMultiple($('#pic-file'), $("#previewImage"),function () {  
3.                if(uploadStatus==0) {//只要ajax上传成功一次,则不再校验.防止点击了选择图片,忘了ajax上传图片的情况  
4.                    uploadStatus=1;  
5.                }  
6.            },6/*单位是M*/);  

 com.whuang.hsj.previewLocalDiskImageMultiple的实现如下:

Java代码   

1. com.whuang.hsj.imgURL = null;  
2. var URL = null;  
3. var getImgUrl = function (file) {  
4.     URL = window.URL || window.webkitURL;  
5.     /*if (com.whuang.hsj.imgURL != null) { 
6.      URL.revokeObjectURL(com.whuang.hsj.imgURL);//free the memory; 
7.      }*/  
8.     com.whuang.hsj.imgURL = URL.createObjectURL(file);  
9. //                    $('body').append($('<img/>').attr('src', imgURL));  
10.     var imgUrl2 = com.whuang.hsj.imgURL;  
11.     return imgUrl2;  
12. };  
13.   
14. com.whuang.hsj.previewLocalDiskImageMultiple = function ($fileElement, $previewImage, callback, maxSizeM) {  
15.     $fileElement.change(function (event) {  
16.         var eventTarget = com.whuang.hsj.getSrcElement(event);  
17.         var files = eventTarget.files;  
18.         if (!maxSizeM) {  
19.             maxSizeM = 2;  
20.         }  
21.         if (files && files.length > 0) {  
22.             var $parentDiv = $previewImage.parent();  
23.             $parentDiv.empty();  
24.             for (var i = 0; i < files.length; i++) {  
25.                 var file = files[i];  
26.                 //console.log(file);  
27.   下载
28.                 /*if (file.size > 1024 * 1024 * maxSizeM) { 
29.                  alert('image size Can\'t be more than ' + maxSizeM + 'MB'); 
30.                  event.returnValue = false; 
31.                  return false; 
32.                  }*/  
33.                 var imgUrl2 = getImgUrl(file);  
34.                 if ($parentDiv && $parentDiv.length && imgUrl2) {  
35.                     $parentDiv.append($('<img style="max-width: 100%;" alt="暂无预览图片" id="previewImage" src="' + imgUrl2 + '"><hr color="red">'));  
36.                 }  
37.             }  
38.   
39.             if (typeof callback === 'function') {  
40.                 callback(com.whuang.hsj.imgURL);  
41.             }  
42.         }  
43.     });  
44. };  

 上传图片的表单:

Html代码   

1. <form action="/image/upload" id="pic-form"  method="post" enctype="multipart/form-data" >  
2.                             <input type="file" id="pic-file" name="image223" multiple > <br><br>  
3.                             <input type="button" onclick="ajaxUploadFile(this)" id="upload_pic" value="ajax上传图片" > <span  id="upload_result_tip" ></span>  
4.                         </form>