js异步上传多张图片插件的使用方法
网络 2018-11-20 1376
本文为大家分享了js异步上传多张图片插件的使用方法，供大家参考，具体内容如下
效果展示：
功能描述：
1.实现图片预览，预览图片移除，任意张数异步上传，上传进度条指示，已选中且上传的图片不会重复上传，且不能移除
使用方法：
界面顶部引入IMGUP.css，2.0版本以下的Jquery，页面底部引入IMGUP.js
界面中必须存在三个元素
1、图片选择： id必须是“div_imgfile”，可以是任意元素，onclick事件触发选择对话框
2、图片预览容器：id必须是“div_imglook”的div，里面包含一个清除浮动的div
3、确定上传按钮：id必须是“btn_ImgUpStart”，可以是任意元素，onclick事件开始上传全部选中图片
样式可随意更改，js文件顶部有三个变量，可以分别设置单张图片大小限制，单位MB，最多选中图片张数，异步提交服务端位置
ajax中回调函数可以修改提示信息样式，查找“alert”也可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 | <body> <!--图片选择对话框--> <div id="div_imgfile">选择图片</div> <!--图片预览容器--> <div id="div_imglook"> <div style="clear: both;"></div> </div> <!--确定上传按钮--> <input type="button" value="确定上传" id="btn_ImgUpStart" /> </body> <style> /*选择图片框样式*/ #div_imgfile { width: 130px; height: 130px; text-align: center; line-height: 130px; font-family: 微软雅黑; font-size: 16px; box-sizing: border-box; border: 2px solid #808080; cursor: pointer; } /*选择图片框鼠标移入移出效果*/ #div_imgfile:hover { background-color: #d1cfcf; } .imgfile { display: none; } /*这里是图片预览容器样式*/ #div_imglook { margin-top: 20px; background-color: #FFEFD5; } /*单个图片预览模块样式*/ .lookimg { width: 130px; height: 130px; box-sizing: border-box; border: 1px solid #808080; float: left; margin-right: 10px; position: relative; } .lookimg img { width: 100%; height: 100%; } /*删除按钮样式*/ .lookimg_delBtn { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 30px; text-align: center; line-height: 30px; background-color: #808080; opacity: 0.8; color: white; font-size: 16px; font-family: 微软雅黑; display: none; cursor: pointer; } /*删除按钮移入移出效果*/ .lookimg_delBtn:hover { opacity: 1; } /*上传进度条样式*/ .lookimg_progress { position: absolute; bottom: 15px; left: 0px; width: 100%; height: 20px; background-color: #e0e0e0; box-sizing: border-box; border: 1px solid black; display: none; text-align: center; line-height: 20px; font-size: 14px; } .lookimg_progress div { position: absolute; left: 0px; top: 0px; height: 100%; width: 0px; background-color: #e9cc2e; } /*确定上传按钮样式*/ #btn_ImgUpStart { width: 130px; height: 40px; margin-top: 30px; } </style> <script> var IMG_LENGTH = 1;//图片最大1MB var IMG_MAXCOUNT = 5;//最多选中图片张数 var IMG_AJAXPATH = "ajax/ImgUpLoad.ashx";//异步传输服务端位置 var UP_IMGCOUNT = 0;//上传图片张数记录 //打开文件选择对话框 $("#div_imgfile").click(function () { if ($(".lookimg").length >= IMG_MAXCOUNT) { alert("一次最多上传" + IMG_MAXCOUNT + "张图片"); return; } var _CRE_FILE = document.createElement("input"); if ($(".imgfile").length <= $(".lookimg").length) {//个数不足则新创建对象 _CRE_FILE.setAttribute("type", "file"); _CRE_FILE.setAttribute("class", "imgfile"); _CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg"); _CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号 $("#div_imgfile").after(_CRE_FILE); } else { //否则获取最后未使用对象 _CRE_FILE = $(".imgfile").eq(0).get(0); } return $(_CRE_FILE).click();//打开对象选择框 }); //创建预览图，在动态创建的file元素onchange事件中处理 $(".imgfile").live("change", function () { if ($(this).val().length > 0) {//判断是否有选中图片 //判断图片格式是否正确 var FORMAT = $(this).val().substr($(this).val().length - 3, 3); if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg") { alert("文件格式不正确！！！"); return; } //判断图片是否过大，当前设置1MB var file = this.files[0];//获取file文件对象 if (file.size > (IMG_LENGTH * 1024 * 1024)) { alert("图片大小不能超过" + IMG_LENGTH + "MB"); $(this).val(""); return; } //创建预览外层 var _prevdiv = document.createElement("div"); _prevdiv.setAttribute("class", "lookimg"); //创建内层img对象 var preview = document.createElement("img"); $(_prevdiv).append(preview); //创建删除按钮 var IMG_DELBTN = document.createElement("div"); IMG_DELBTN.setAttribute("class", "lookimg_delBtn"); IMG_DELBTN.innerHTML = "移除"; $(_prevdiv).append(IMG_DELBTN); //创建进度条 var IMG_PROGRESS = document.createElement("div"); IMG_PROGRESS.setAttribute("class", "lookimg_progress"); $(IMG_PROGRESS).append(document.createElement("div")); $(_prevdiv).append(IMG_PROGRESS); //记录此对象对应编号 _prevdiv.setAttribute("num", $(this).attr("num")); //对象注入界面 $("#div_imglook").children("div:last").before(_prevdiv); UP_IMGCOUNT++;//编号增长防重复 //预览功能 start var reader = new FileReader();//创建读取对象 reader.onloadend = function () { preview.src = reader.result;//读取加载，将图片编码绑定到元素 } if (file) {//如果对象正确 reader.readAsDataURL(file);//获取图片编码 } else { preview.src = "";//返回空值 } //预览功能 end } }); //删除选中图片 $(".lookimg_delBtn").live("click", function () { $(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图片file $(this).parent().remove();//移除图片显示 }); //删除按钮移入移出效果 $(".lookimg").live("mouseover", function () { if ($(this).attr("ISUP") != "1") $(this).children(".lookimg_delBtn").eq(0).css("display", "block");; }); $(".lookimg").live("mouseout", function () { $(this).children(".lookimg_delBtn").eq(0).css("display", "none");; }); //确定上传按钮 $("#btn_ImgUpStart").click(function () { if ($(".lookimg").length <= 0) { alert("还未选择需要上传的图片"); return; } //全部图片上传完毕限制 if ($(".lookimg[ISUP=1]").length == $(".lookimg").length) { alert("图片已全部上传完毕！"); return; } //循环所有已存在的图片对象，准备上传 for (var i = 0; i < $(".lookimg").length; i++) { var NOWLOOK = $(".lookimg").eq(i);//当前操作的图片预览对象 NOWLOOK.index = i; //如果当前图片已经上传，则不再重复上传 if (NOWLOOK.attr("ISUP") == "1") continue; //上传图片准备 var IMG_BASE = NOWLOOK.children("img").eq(0).attr("src"); //要上传的图片的base64编码 var IMG_IND = NOWLOOK.attr("num"); var IMG_ROUTE = $(".imgfile[num=" + IMG_IND + "]").eq(0).val();//获取上传图片路径，为获取图片类型使用 var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图片类型 var IMG_FOMATE = "jpeg"; //图片类型*** if (IMG_ENDFOUR.trim() == ".jpg") IMG_FOMATE = "jpg"; else if (IMG_ENDFOUR.trim() == ".png") IMG_FOMATE = "png"; //图片正式开始上传 $.ajax({ type: "POST", url: IMG_AJAXPATH, data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE, 'lookIndex': NOWLOOK.index },//图片base64编码，图片格式（当前仅支持jpg,png,jpeg三种），图片对象索引 dataType: "json", success: function (data) { if (data.isok == "1") { //图片上传成功回调 var UPTIME = Math.ceil(Math.random() * 400) + 400;//生成一个400-800的随机数，假设进图条加载时间不一致 $(".lookimg").eq([data.ind]).attr("ISUP", "1");//记录此图片已经上传 $(".lookimg").eq([data.ind]).children(".lookimg_progress").eq(0).children("div").eq(0).animate({ width: "100%" }, UPTIME, function () { $(this).css("background-color", "#00FF00").text('上传成功'); }); } else {//图片未上传成功回调 $(".lookimg")[data.ind].children(".lookimg_progress").eq(0).children("div").eq(0).css("width", "100%").css("background-color", "red").text("上传失败"); } }, error: function (err) { //服务器连接失败报错处理 alert("error"); //alert(err.responseText); }, beforeSend: function () { //图片上传之前执行的操作，当前为进度条显示 NOWLOOK.children(".lookimg_progress").eq(0).css("display", "block");//进度条显示 } }); } }); </script> |
以上就是本文的全部内容，希望对大家的学习有所帮助
