h5多图片上传

最新推荐文章于 2024-08-23 10:06:47 发布

越简单越好

最新推荐文章于 2024-08-23 10:06:47 发布

阅读量743

点赞数

主要是运用html5的 filereader可以参考 http://blog.csdn.net/yaoyuan_difang/article/details/38582697

FileReader的使用

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html>  
 <head>  
     <meta charset="UTF-8">  
     <title> 上传多张图片</title>  
     <style type="text/css">  
         .img-div{  
             border: 1px solid #ddd;  
             border-radius: 100%;  
             float: left;  
             line-height: 1;  
             margin-left: 5px;  
             overflow: hidden;  
         }  
   
     </style>  
 </head>  
 <body>  
   
 <script type="text/javascript">  
     //选择图片，马上预览  
     function xmTanUploadImg(obj) {  
   
         var fl=obj.files.length;  
         for(var i=0;i<fl;i++){  
             var file=obj.files[i];  
             var reader = new FileReader();  
   
             //读取文件过程方法  
   
             reader.onloadstart = function (e) {  
                 console.log("开始读取....");  
             }  
             reader.onprogress = function (e) {  
                 console.log("正在读取中....");  
             }  
             reader.onabort = function (e) {  
                 console.log("中断读取....");  
             }  
             reader.onerror = function (e) {  
                 console.log("读取异常....");  
             }  
             reader.onload = function (e) {  
                 console.log("成功读取....");  
   
                 var imgstr='<img style="width:100px;height:100px;" src="'+e.target.result+'"/>';  
                 var oimgbox=document.getElementById("imgboxid");  
                 var ndiv=document.createElement("div");  
   
                 ndiv.innerHTML=imgstr;  
                 ndiv.className="img-div";  
                 oimgbox.appendChild(ndiv);  
                  
             }  
   
             reader.readAsDataURL(file);  
 //alert(1);  
         }  
   
     }  
 </script>  
 <form id="form"  enctype="multipart/form-data">  
         <input type="file" id="xdaTanFileImg"  multiple="multiple"  name="fileAttach" onchange="xmTanUploadImg(this)"/>  
     <div class="img-box" id="imgboxid">  
   
     </div>  
   
                       <div id="xmTanDiv"></div><br/>  
                 <div id="errordiv"   style="margin-top:15px;width:100%;text-align:center;">  
                 <input id="bt" type="button" onclick="test(this)" value="提交" />   
             </div>  
 </form>  
 </body>  