search

Home >Web Front-end >JS Tutorial >jquery multiple file upload, welcome to correct me

jquery multiple file upload, welcome to correct me

巴扎黑
巴扎黑Original
2017-06-26 14:22:581147browse

Recently, the company was working on a project, which used multiple image uploads. I found that there were very few online tutorials. So I wrote an upload js myself. It was uploaded using ajax and formdata. This thing can not only transfer pictures, but also files. It is also possible, but the picture will not be displayed when previewing

Go to the front desk to call the code first

 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>

The following is the uploaded js

Idea: Put all the uploaded images into an array, and use FileReader() to display the images, so that they can be displayed before uploading How the picture looks like

  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 }

The last is the css style, which is convenient for users to define by themselves , I am a person who has no aesthetic taste.... The style is just acceptable 

 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 }

The above is the detailed content of jquery multiple file upload, welcome to correct me. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Problems when jquery attr handles form elements such as checkbox / selectNext article：Problems when jquery attr handles form elements such as checkbox / select

Related articles

See more