Jquery multi-File Upload. Thank you for your attention. jquery File Upload

Jquery multi-File Upload. Thank you for your attention. jquery File Upload

Recently, the company made a project that used multi-Image Upload. I found that few tutorials were written online. write an uploaded js file by yourself. uploaded using ajax and formdata. this is not just an option for uploading images, but an image cannot be displayed during preview.

Call the code on the front-end first

 

1 <! DOCTYPE html> 2 
 
 
Below is the uploaded js
 
Idea: Put All uploaded images in an array and use FileReader () to display the images so that they can be displayed before upload.
 
1 var object = {2 id: "", // div id, The div 3 url to be bound: "", // upload background address 4 // upload file type, image or file, which involves different styles shown later. 5 // can I select 6 more tpcall: function (data) {}, // callback function 7 success after Image Upload is complete: function (data) {}, // method of success, callback function 8 error: function (err) {}// method of failure, callback Function 9} 10 11 var fdata = new FormData (); // uploads a file and serializes it into form Format 12 13 var htm = ""; 14 15 var s = new Array (); 16 17 // Delete image 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 // obtain the file and splice it to the 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" example .html (); 42 43 htm + = "<li class = \" li_xinyang \ ">"; 44 htm + = " "; 45 htm + =" <span class = \ "span_xinyang \" onclick = \ "del ('" + theFile. name + "', this) \"> Delete </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 // upload an image. Use the formdata type to upload 64 function tj (url, sucess, err) {65 66 67 if (s. length = 0) {68 alert ("select a file"); 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 // simulate clicking the input file button 86 function tianjia_xinyang () {87 $ ("# file_xinyang "). click (); 88} 89 90 91 // call method 92 jQuery after referencing. 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 = \" Upload \ "onclick = \" tj ('"+ object. url + "'," + object. success + "," + object. error + ") \"/> "; 98 SC + = "<input class = \" btn_tj_xinyang \ "type = \" button \ "value = \" add \ "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 $ ("#" + object.id).html (SC); 108 109 110}
 
 
 
Finally, css styles are easy for you to define. I am a non-aesthetic person, and the style can be integrated.
 
 
 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 }