jquery多文件上传,欢迎大家指正
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery多文件上传,欢迎大家指正，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5382字，纯文字阅读大概需要8分钟。
内容图文
最近公司做一个项目,其中用到了多图片上传.发现网上教程写的很少.便自己写了一个上传的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 }以上就是jquery 多文件上传,欢迎大家指正的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jquery多文件上传,欢迎大家指正全部内容，希望文章能够帮你解决jquery多文件上传,欢迎大家指正所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】