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

Source: Internet
Author: User
Tags 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 }

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.