1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 5 <meta charset="UTF-8"> 6 <title>使用FormData上传图片</title> 7 <style> 8 .clearflex:after{ 9 content:''; 10 height:0; 11 display:block; 12 clear: both; 13 visibility: hidden; 14 } 15 .content{ 16 width:600px; 17 height: 500px; 18 border-radius:10px; 19 padding:10px; 20 overflow-y: scroll; 21 margin:100px auto 0; 22 border:1px solid #333; 23 } 24 .upWrap{ 25 width:100px; 26 height: 100px; 27 margin:10px; 28 float: left; 29 position: relative; 30 overflow: hidden; 31 } 32 .upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file]{ 33 position: absolute; 34 height: 100%; 35 width:100%; 36 top:0; 37 left:0; 38 } 39 .fileWrap{ 40 background:#eee; 41 } 42 input[type=file]{ 43 z-index: 2; 44 opacity: 0; 45 } 46 .upWrap > .imgWrap{ 47 z-index: 1; 48 } 49 .selected_img{ 50 height: 100%; 51 } 52 .upedImg{ 53 z-index: 3 !important; 54 } 55 .upedImg > span.deleteImg{ 56 position:absolute; 57 content: 'X'; 58 width:20px; 59 font-size: 16px; 60 color:#ff0000; 61 background:rgba(0,0,0,0.6); 62 height:20px; 63 text-align: center; 64 line-height: 20px; 65 right:0; 66 top:0; 67 z-index:4; 68 } 69 70 .imgWrap{ 71 width:100%; 72 height: 100%; 73 color:gray; 74 font-size: 72px; 75 position: absolute; 76 top:0; 77 left:0; 78 text-align: center; 79 } 80 .upload_btn{ 81 width: 200px; 82 line-height: 59px; 83 color:#fff; 84 background: limegreen; 85 text-align: center; 86 border-radius: 10px; 87 margin: 20px auto 0; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="content clearFlex"> 93 <form action="" enctype="multipart/form-data"> 94 <div class="upImg clearflex"> 95 <div class="imgOnloadWrap"> 96 <!-- <div class="upWrap"> 97 <div class="imgWrap upedImg"> 98 <span class="deleteImg">X</span> 99 <img src="" alt="" class="selected_img"> 100 </div> 101 </div> --> 102 </div> 103 <div class="upWrap"> 104 <div class="imgWrap">+</div> 105 <div class="fileWrap"> 106 <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)" class="open_picture"/> 107 </div> 108 </div> 109 </div> 110 </form> 111 </div> 112 <div class="upload_btn">确认上传</div> 113 </body> 114 <script src="../assets/js/jquery.min.js"></script> 115 <script> 116 /*------------------------------上传图片---------------------------*/ 117 var imgFile = ''; 118 function upImg(obj){ 119 imgFile = obj.files[0]; 120 console.log(imgFile); 121 var img = new Image(); 122 var fr = new FileReader(); 123 fr.onload = function(){ 124 var htmlStr = '<div class="upWrap">'; 125 htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>'; 126 htmlStr += '<img src="'+fr.result+'" alt="" class="selected_img"/>'; 127 htmlStr += '</div>'; 128 htmlStr += '</div>'; 129 $('.imgOnloadWrap').append(htmlStr); 130 obj.value = ''; 131 } 132 fr.readAsDataURL(imgFile); 133 } 134 /*-----------------------------删除图片------------------------------*/ 135 $(document).on('click','.upedImg .deleteImg',function(){ 136 //处理未来事件 137 $(this).parent().parent().remove(); 138 }) 139 /*-----------------------------确认上传------------------------------*/ 140 function uploadImg(){ 141 var formData = new FormData(); 142 formData.append('src',2); 143 formData.append('picture',imgFile); 144 145 $.ajax({ 146 url: '传输地址', 147 type: 'POST', 148 cache: false, //上传文件不需要缓存 149 data: formData, 150 processData: false, // 告诉jQuery不要去处理发送的数据 151 contentType: false, // 告诉jQuery不要去设置Content-Type请求头 152 success: function (res) { 153 console.log(res) 154 if(res.ret == 0){ 155 console.log(上传成功) 156 } 157 }, 158 error: function (err) { 159 console.log(err) 160 } 161 }) 162 } 163 </script> 164 </html>
附支持的文件类型：
*.3gpp audio/3gpp， video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript， application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg， video/mpeg MPEG Audio/Video Stream， Layer II
*.mp3 audio/mpeg MPEG Audio Stream， Layer III
*.mp4 audio/mp4， video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream， Layer II
*.mpg video/mpeg MPEG Video Stream， Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg， audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf， text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml， application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive
本文仅支持上传一张图片，望知道上传多张图片方法的朋友分享一下。