Rumah > Artikel > hujung hadapan web > jquery 多文件上传,欢迎大家指正
jquery 多文件上传,欢迎大家指正
- 巴扎黑asal
- 2017-06-26 14:22:581074semak imbas
最近公司做一个项目,其中用到了多图片上传.发现网上教程写的很少.便自己写了一个上传的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>
下面是上传的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('" + theFile.name + "',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('" + object.url + "'," + 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 }
最后是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 }Atas ialah kandungan terperinci jquery 多文件上传,欢迎大家指正. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery attr处理checkbox / select 等表单元素时的问题Artikel seterusnya：封装基于jq弹窗插件