图片上传
该插件兼容PC端和移动端，移动端点开后可以有相机选择功能，增加成功后还可以进行图片的删除。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 5 <meta content="no-cache" http-equiv="pragma" /> 6 <meta content="no-cache, must-revalidate" http-equiv="Cache-Control" /> 7 <meta content="Wed, 26 Feb 1997 08:21:57GMT" http-equiv="expires"> 8 <meta name="format-detection" content="telephone=no"/> 9 <title>发表话题</title> 10 <link rel="stylesheet" type="text/css" href="css/style.css"> 11 <!--移动端版本兼容 --> 12 <script type="text/javascript"> 13 var phoneWidth = parseInt(window.screen.width); 14 var phoneScale = phoneWidth/640; 15 var ua = navigator.userAgent; 16 if (/Android (\d+\.\d+)/.test(ua)){ 17 var version = parseFloat(RegExp.$1); 18 if(version>2.3){ 19 document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); 20 }else{ 21 document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); 22 } 23 } else { 24 document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); 25 } 26 </script> 27 <!--移动端版本兼容 end --> 28 </head> 29 <body> 30 31 <div class="main"> 32 <div class="setArray_top fixed"> 33 <a href="#" class="setArray_top_back">上一步</a> 34 <div class="setArray_top_font">第四步：添加商品</div> 35 <a href="#" class="setArray_top_go">下一步</a> 36 </div> 37 <div class="bu3"></div> 38 <div class="setAddShopTwo_sum">4.添加商品( 39 <div class="addShopTwo_sum"><span class="firstSpan">0</span><span>/3)</span></div> 40 </div> 41 <div class="classNUll1"> 42 <div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'> 43 <div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr"> 44 <div class="daiti2 daiti3"></div> 45 <input type="file" onChange="addImgxiangJiimg(this,1)" accept="image/*" capture="camera" id="selectFileImageTwoThr" /> 46 </div> 47 </div> 48 </div> 49 <div class="classNUll2" style="display:none"> 50 <div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'> 51 <div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr"> 52 <div class="daiti2 daiti3"></div> 53 <input type="file" onChange="addImgxiangJiimg(this,2)" accept="image/*" capture="camera" id="selectFileImageTwoThr" /> 54 </div> 55 </div> 56 </div> 57 <div class="classNUll3" style="display:none"> 58 <div class="addShopTwo_addImg_div setAddShopTwo_addImg_div fixed" style='float:left;'> 59 <div class="addHuaXq_top_addImg setAddHuaXq_top_addImg setAddHuaXq_top_addImgTwoThr"> 60 <div class="daiti2 daiti3"></div> 61 <input type="file" onChange="addImgxiangJiimg(this,3)" accept="image/*" capture="camera" id="selectFileImageTwoThr" /> 62 </div> 63 </div> 64 </div> 65 66 <canvas id="canvas" style="display:none;"></canvas> 67 </div> 68 <div class="changeImage" onClick="hideImage()"> 69 </div> 70 <div class="changeImage2" onClick="hideImage()"> 71 <img src="" class="change" onClick="hideImage()"/> 72 </div> 73 74 </body> 75 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 76 <script type="text/javascript" src="js/exif.js"></script> 77 <script> 78 var sum=0; 79 function addImgTextarea(obj){ 80 $(obj).parent().parent().removeClass("changeFile"); 81 var countAll=$(obj).parent().parent().attr("class").substring(9,$(obj).parent().parent().attr("class").length); 82 83 if(countAll==1){ 84 if(!$(obj).parent().parent().siblings(".classNUll2").hasClass("changeFile")){ 85 if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")){ 86 $(".classNUll2,.classNUll3").hide(); 87 }else { 88 $(".classNUll3").show(); 89 } 90 }else { 91 $(".classNUll3,.classNUll3").show(); 92 } 93 } 94 if(countAll==2){ 95 if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")){ 96 $(".classNUll3").hide(); 97 }else { 98 $(".classNUll3").show(); 99 } 100 } 101 if(countAll==3){ 102 if(!$(obj).parent().parent().siblings(".classNUll3").hasClass("changeFile")&&!$(obj).parent().parent().siblings(".classNUll2").hasClass("changeFile")){ 103 if(!$(obj).parent().parent().siblings(".classNUll1").hasClass("changeFile")){ 104 $(".classNUll2,.classNUll3").hide(); 105 }else { 106 $(".classNUll2").show(); 107 $(".classNUll3").hide(); 108 } 109 } 110 } 111 $(".addHuaXq_top_addImg").show(); 112 $(obj).parent().siblings().show(); 113 114 $(obj).parent().remove(); 115 116 117 sum--; 118 $(".addShopTwo_sum .firstSpan").text(sum); 119 120 } 121 var array=[]; 122 function addImgxiangJiimg(fileObj,count) { 123 var file = fileObj.files['0']; 124 125 var Orientation = null; 126 if (file) { 127 var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式 128 if (!rFilter.test(file.type)) { 129 alert("请选择jpeg、png格式的图片"); 130 init(); 131 return false; 132 } 133 array.push($(fileObj).val()); 134 $("#loading").remove(); 135 sum++; 136 137 $(".classNUll"+count).append("<div class='addImg_xiangJi_img addImg_xiangJi_imgTwoTwo' style='float:left;'><div id='loading'></div>"+ 138 "<img src='' class='addImg addImg_xiangJi_imgTwo"+count+"' onclick='changeImage(this)'>"+ 139 "<img src='images/textarea_cha.png' class='addImg_textarea_cha' onclick='addImgTextarea(this)'></div>"); 140 141 $(".classNUll"+count).find(".setAddShopTwo_addImg_div").hide(); 142 143 $("#loading").show(); 144 145 $(".addShopTwo_sum .firstSpan").text(sum); 146 if(sum==3){ 147 $(".addHuaXq_top_addImg").hide(); 148 }else { 149 $(".addHuaXq_top_addImg").show(); 150 } 151 //获取照片方向角属性，用户旋转控制 152 EXIF.getData(file, function() { 153 //alert(EXIF.pretty(this)); 154 EXIF.getAllTags(this); 155 //alert(EXIF.getTag(this, 'Orientation')); 156 Orientation = EXIF.getTag(this, 'Orientation'); 157 //return; 158 }); 159 var oReader = new FileReader(); 160 oReader.onload = function(e) { 161 init(); 162 var image = new Image(); 163 image.src = e.target.result; 164 image.onload = function() { 165 var expectWidth = this.naturalWidth; 166 var expectHeight = this.naturalHeight; 167 //alert(expectWidth+"=expectWidth+++++++++++expectHeight="+expectHeight); 168 var scale=expectWidth/expectHeight; 169 if(expectWidth > expectHeight && expectWidth>2000){ 170 expectWidth=1000; 171 expectHeight=1000/scale; 172 } else if(expectWidth < expectHeight && expectHeight>2000){ 173 expectHeight=1000; 174 expectWidth=1000*scale; 175 } 176 //alert(expectWidth+"=expectWidth+++++++++++expectHeight="+expectHeight); 177 var canvas = document.createElement("canvas"); 178 var ctx = canvas.getContext("2d"); 179 canvas.width = expectWidth; 180 canvas.height = expectHeight; 181 182 //如果方向角不为1，都需要进行旋转 183 if(Orientation && Orientation != "" && Orientation != 1){ 184 //alert('旋转处理'); 185 var degree=0; 186 //alert(Orientation); 187 switch(Orientation){ 188 case 6://需要顺时针（向左）90度旋转 189 degree=90; 190 canvas.width = expectHeight; 191 canvas.height = expectWidth; 192 ctx.translate(expectHeight/2,expectWidth/2); 193 ctx.rotate(degree * Math.PI / 180); 194 ctx.translate(-expectWidth/2,-expectHeight/2); 195 ctx.drawImage(image,0,0,expectWidth,expectHeight); 196 break; 197 case 8://需要逆时针（向右）90度旋转 ; 198 degree=-90; 199 canvas.width = expectHeight; 200 canvas.height = expectWidth; 201 ctx.translate(expectHeight/2,expectWidth/2); 202 ctx.rotate(degree * Math.PI / 180); 203 ctx.translate(-expectWidth/2,-expectHeight/2); 204 ctx.drawImage(image,0,0,expectWidth,expectHeight); 205 break; 206 case 3://需要180度旋转 207 degree=-180; 208 ctx.rotate(degree * Math.PI / 180); 209 ctx.drawImage(image,-expectWidth,-expectHeight,expectWidth,expectHeight); 210 break; 211 } 212 }else{ 213 ctx.drawImage(image,0,0,expectWidth,expectHeight); 214 } 215 216 var datu = canvas.toDataURL("image/png"); 217 if(count==1){ 218 $(".classNUll2").show(); 219 } 220 if(count==2){ 221 $(".classNUll3").show(); 222 } 223 $(".classNUll"+count).addClass("changeFile"); 224 $(".addImg_xiangJi_imgTwo"+count).attr("src", datu); 225 }; 226 }; 227 oReader.readAsDataURL(file); 228 } 229 } 230 231 function hideImage(){ 232 $(".changeImage,.changeImage2,.change").hide(); 233 } 234 function changeImage(obj){ 235 $(".changeImage,.changeImage2,.change").show(); 236 $(".changeImage2 .change").attr("src",$(obj).attr("src")); 237 } 238 function init() { 239 $("#loading").fadeOut(); 240 } 241 </script> 242 </html>
效果图：
增加一张图片：
插件下载地址：https://git.oschina.net/wxwphp/imageUpload.git
