jquery 多文件上传,欢迎大家指正-tutorial js-php.cn

jquery 多文件上传,欢迎大家指正

巴扎黑

Lepaskan： 2017-06-26 14:22:58

asal

1134 orang telah melayarinya

最近公司做一个项目,其中用到了多图片上传.发现网上教程写的很少.便自己写了一个上传的js. 用ajax 与 formdata上传的. 这个东西不只是可以传图片,传文件也是可以的只不过预览的时候会显示不出来图片

先上前台调用代码

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5     <title></title> 6     <script src="Scripts/jquery-1.8.2.min.js?1.1.11"></script> 7     <script src="Scripts/cs.js?1.1.11"></script> 8     <link href="Scripts/tpsc.css?1.1.11" rel="stylesheet" /> 9     <script>10 11         $(function () {12 13             $.tpsc({14                 id: "xinyang",15                 url: "Content/jieshou.ashx",16                 tpcall: function(thefile)  //图片每加载一张,会调用一次,注意:此处不能使用alert()等阻塞方法,只允许存在单引号,双引号会被转义17                 {18                     $('.li_xinyang').mouseenter(function () {19                         $(this).find('span').show();20                     }).mouseleave(function () {21                         $(this).find('span').hide();22                     });23                 },24                 success: function(data)  //上传成功后的回调方法25                 {26                     alert(data);27                 },28                 error:function(data)  //上传失败的回调方法29                 {30                     alert(data);31                 }32             });33 34         });35     </script>36 </head>37 <body>38    39     <div id="xinyang" >40 41       42 43     </div>44 </body>45 </html>

Salin selepas log masuk

下面是上传的js

思路: 把上传的图片全部放到一个数组中,并用 FileReader() 来展示图片,这样可以在上传前就展示出图片的样子

  1  var object = {  2     id: "",   //div的id,需要绑定的div  3     url: "", //上传的后台地址  4     //上传文件类型,图片or 文件  , 涉及后面展示的样式不同  5     //是否可以多选  6     tpcall:function(data){}, //图片上传完成后的回调函数  7     success: function (data) { },   //成功的方法,回调函数  8     error: function (err) { }     //失败的方法,回调函数  9 } 10  11 var fdata = new FormData();  //上传文件用,把文件序列化成form格式 12  13 var htm = ""; 14  15 var s = new Array(); 16  17 //删除图片 18 function del(name, t) { 19  20     for (var i = 0; i < s.length; i++) { 21         if (s[i].name == name) { 22             s.splice(i, 1); 23             $(t).parent().remove(); 24         } 25     } 26 } 27  28 //获取文件,拼接展示到页面 29 function ch(fi, tpcall) { 30  31  32     for (var i = 0; i < fi.length; i++) { 33  34         var reader = new FileReader(); 35         s.push(fi[i]); 36  37         reader.onload = (function (theFile) { 38  39             return function (e) { 40  41                 htm = $("#zhanshi_xinyang").html(); 42  43                 htm += "<li class=\"li_xinyang\">"; 44                 htm += "  <img class=\"img_xinyang\"  src=\"" + this.result + "\" />"; 45                 htm += "   <span  class=\"span_xinyang\" onclick=\"del(&#39;" + theFile.name + "&#39;,this)\">删除</span>"; 46                 htm += "</li>"; 47                 $("#zhanshi_xinyang").html(htm); 48                 tpcall(theFile); 49  50             } 51  52         })(fi[i]); 53         reader.readAsDataURL(fi[i]); 54  55  56     } 57  58     $("#file_xinyang").val(''); 59 } 60  61  62  63 //上传图片,采用formdata类型上传 64 function tj(url, sucess, err) { 65  66  67     if (s.length == 0) { 68         alert("请选择文件"); 69         return; 70     } 71  72     for (var i = 0; i < s.length; i++) { 73         fdata.append("tp" + i, s[i]); 74     } 75  76     $.ajax({ 77         url: url, 78         type: "POST", 79         data: fdata, 80         contentType: false, 81         processData: false, 82     }).done(function (data) { sucess(data) }).fail(function (data) { err(data) }); 83 } 84  85 //模拟点击input file 按钮 86 function tianjia_xinyang() { 87     $("#file_xinyang").click(); 88 } 89  90  91 //引用后外面调用的方法 92 jQuery.tpsc = function (object) { 93     var sc = ""; 94  95     sc += " <div>"; 96     sc = "<input type=\"file\" id=\"file_xinyang\" multiple=\"multiple\" onchange=\"ch(this.files," + object.tpcall + ")\" style=\"display:none\" />"; 97     sc += "  <input class=\"btn_sc_xinyang\" type=\"button\" value=\"上传\" onclick=\"tj(&#39;" + object.url + "&#39;," + object.success + "," + object.error + ")\" />"; 98     sc += "       <input class=\"btn_tj_xinyang\" type=\"button\" value=\"添加\" onclick=\"tianjia_xinyang()\" />"; 99     sc += "</div>";100 101     sc += "<div>";102     sc += "   <ul style=\" margin:0; width:99%; overflow:hidden\" id=\"zhanshi_xinyang\">";103 104     sc += "   </ul>";105     sc += "</div>";106 107 108     $("#" + object.id).html(sc);109 110 }

Salin selepas log masuk

最后是css样式,方便用户自己定义,我是个没有审美的人....样式凑合看就可以了

 1 .btn_tj_xinyang{ 2  3 } 4 .btn_sc_xinyang{ 5  6 } 7 .li_xinyang{ 8     position: relative; 9     float:left; 
10     padding:5px;11     list-style:none;12     width: 100px;13     /*height: 100px;*/14     border: 1px solid #DDDDDD;15 }16 .img_xinyang17 {18     display:block;19     width: 100%;20 }21 .span_xinyang22 {23     position: absolute;24     display:none; 
25     width:100%; 
26     height:30px; 
27     line-height:30px; 
28     background-color:rgba(0,0,0,0.5);29     color: #ffffff;30     text-align:center;31     cursor:pointer;32     bottom: 1px;33     left: 0px;34 }

Salin selepas log masuk

Atas ialah kandungan terperinci jquery 多文件上传,欢迎大家指正. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!