js实现多图上传和预览(包含表单上传、ajax上传)
来源：互联网 发布：python dateutil 编辑：程序博客网 时间：2024/05/18 19:43
请在这里查看示例 ☞ h5Upload示例
包含的知识点有：(仅考虑手机端，pc兼容性不清，建议使用jquery版本的)
1.浏览器自带的表单上传(页面会跳转)
2.ajax上传(异步刷新、自动上传、可取消上传)
3.一次实现多图上传
4.上传前图片预览
5.base64图片应用
6.创建元素的简单封装
7.insertAfter的封装
7.ajax简单封装
8.手机端标准html书写
9.jquery实现相同功能且封装成jq插件，方便调用
10.jquery版本添加了文件类型筛选功能
原生js版本：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" href="images/send.png" type="/image/x-icon"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <script src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js"></script> <title>test</title> <style> * { margin: 0; padding: 0; font-size: 0.04rem; } body, html { width: 100%; height: 100%; } body { height: 3rem; } .head { position: absolute; top: 0; left: 0; width: 100%; height: .2rem; background: red; } .upFileCtn { width: 50%; background: #3D3F40; padding: 10px; border-radius: 5px; margin: 20px auto 5px auto; position: relative; text-align: center; } .upFileItem { display: inline-block; padding: 0 5px; } .upFileImg { border: none; max-height: 100px; } .upFileName { color: #fff; font-size: 12px; text-align: center; margin-bottom: 5px; } .upFileAbort { position: absolute; right: 0; top: -10px; background: #3D3F40; color: #fff; border-radius: 100px; font-size: 12px; padding: 4px; cursor: pointer; } .upFileOuter { height: 5px; background: #1A1A1A; position: relative; border-radius: 5px; overflow: hidden; } .upFileInner { display: inline-block; height: 100%; background: #5E90D6; position: absolute; top: 0; left: 0; } </style> </head> <body> <form enctype="multipart/form-data" action="http://xxx/material/jQueryFileUpload" method="post"> <input type="file" name="file" class="upFile" multiple="multiple"> <input type="text" name="type" value="1"> <input type="submit" value="表单上传"> <input type="button" value="ajax上传"> </form> <script> window.onload = function() { var winW = document.body.clientWidth, htmlObj = document.querySelector('html'); htmlObj.style.fontSize = ((winW<750) ? winW : 750) +'px'; var file = document.querySelector('[type=file]'); var button = document.querySelector('[type=button]'); var text = document.querySelector('[type=text]'); var body = document.querySelector('body'); var fileData = [];//fileData 为数组 //自动上传 file.addEventListener('change', function() { fileData = []; for(var i=0,len=file.files.length; i<len; i++) { fileData[i] = file.files[i]; } triggerEvent(button, 'click'); }); button.addEventListener('click', function() { if(!fileData[0]) { return; } uploadFile({ url: '../../servlet/AQ?s=uf', data: { file: fileData,//fileData 为数组 }, loadstart: function(e, ran, xhr) { var upFileCtn = createEl('div', {'id': ran, 'class': 'upFileCtn'}), upFileAbort = createEl('span', {'class': 'upFileAbort'}), upFileOuter = createEl('div', {'class': 'upFileOuter'}), upFileInner = createEl('em', {'class': 'upFileInner'}); for(var i=0,len=fileData.length; i<len; i++) { var upFileItem = createEl('div', {'class': 'upFileItem', 'size': fileData[i].size, 'hasRead': '0'}), upFileName = createEl('p', {'class': 'upFileName'}); upFileName.innerText = fileData[i].name; upFileItem.appendChild(upFileName); upFileCtn.appendChild(upFileItem); try { var reader = new FileReader();//IE9-不支持 if(fileData[i].type.indexOf('image')+1) {//可预览 reader.readAsDataURL(fileData[i]); reader.onload = function(e) { var upFileImg = createEl('img', { src: e.target.result, class: 'upFileImg', }); var upFileItems = document.querySelectorAll('.upFileItem'); var upFileNames = document.querySelectorAll('.upFileName'); for(var j=0,len=upFileItems.length; j<len; j++) { if((e.total == upFileItems[j].getAttribute('size')) && !parseInt(upFileItems[j].getAttribute('hasRead'))) { upFileItems[j].setAttribute('hasRead', '1') upFileItems[j].insertBefore(upFileImg, upFileNames[j]); break; } } } }else { var upFileImg = createEl('img', { src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABYCAYAAABiQnDAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI1Q0NBQjg1NUExNzExRTY5RTEzREZFNTRENzc4RkFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI1Q0NBQjg2NUExNzExRTY5RTEzREZFNTRENzc4RkFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjVDQ0FCODM1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjVDQ0FCODQ1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+S+GgAAAGC0lEQVR42uyc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', class: 'upFileImg', }); upFileItem.insertBefore(upFileImg, upFileName); } }catch(e) { console.log(e); } } upFileAbort.innerText = '×'; upFileCtn.appendChild(upFileAbort); upFileCtn.appendChild(upFileOuter); upFileOuter.appendChild(upFileInner); body.appendChild(upFileCtn); //取消上传 document.querySelector('#'+ ran +' .upFileAbort').addEventListener('click', function() { xhr.abort(); upFileCtn.remove(); }); file.value = null;//清空文件路径 }, progress: function(e, ran) { if (e.lengthComputable) { var upFileInner = document.querySelector('#'+ ran +' em'); upFileInner.style.width = e.loaded/e.total*100 +'%'; } }, load: function(e, ran) { var upFileCtn = document.querySelector('#'+ ran); upFileCtn.remove(); var data = JSON.parse(e.currentTarget.response); console.log(data); } }); }); //触发事件 function triggerEvent(el, event) { if (document.createEventObject) {// IE浏览器支持fireEvent方法 var evt = document.createEventObject(); return el.fireEvent('on' + event, evt) } else {// 其他标准浏览器使用dispatchEvent方法 var evt = document.createEvent('HTMLEvents'); evt.initEvent(event, true, true);// 事件类型，是否冒泡，是否阻止浏览器的默认行为 return ! el.dispatchEvent(evt); } }; //上传文件 function uploadFile(options) { var form = new FormData(),//FormData 对象 ran = 'ran'+ Math.round(Math.random() * 10000);//唯一标识符 for(var key in options.data) { var val = options.data[key]; if(val instanceof Array) {//hack数组对象 for(var i=0,len=val.length; i<len; i++) { form.append(key, val[i]);//增加表单数据 } }else { form.append(key, val);//增加表单数据 } } //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open("post", options.url, true); //开始传输 xhr.addEventListener("loadstart", function(e) { options.loadstart(e, ran, xhr);//xhr用于取消上传 }); //传输中 xhr.upload.addEventListener("progress", function(e) { options.progress(e, ran); }); //传输成功 xhr.addEventListener("load", function(e) { options.load(e, ran); }); xhr.send(form); } //请求 /*ajax({ url: "../../classes/listClasses", data: { m: 0, }, success: function(data) { console.log(data); } });*/ function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //接收 - 第三步 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(JSON.parse(xhr.responseText), xhr.responseXML); } else { options.fail && options.fail(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data) { var arr = []; for (var key in data) { arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])); } arr.push(("v=" + Math.random()).replace(".", "")); return arr.join("&"); } //创建元素 createEl('span', {'id': ran, 'class': 'upFileOuter'}) function createEl(tagName, attrs, style, text) { var el = document.createElement(tagName); if (attrs) { for (key in attrs) { if (key == "className") { el.className = attrs[key]; } else if (key == "id") { el.id = attrs[key]; } else { el.setAttribute(key, attrs[key]); } } } if (style) { for (key in style) { el.style[key] = style[key]; } } if (text) { el.appendChild(document.createTextNode(text)); } return el; } function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode; if (parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); } else { parentEl.insertBefore(newEl, targetEl.nextSibling); } } } </script> </body> </html> jquery版本(更完善，方便调用，兼容性IE10+)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <script src="../js/jquery-1.11.3.min.js"></script> <title>demo</title> <style> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; } body { height: 3rem; } .msgCtn { border: 1px solid red; border-radius: 5px; padding: 20px; } </style> </head> <body> <p>请尽量上传大一点的文件，方便查看过程(图片资源会自动显示预览图)</p> <input type="file" class="file" multiple="multiple"> <div class="msgCtn"></div> <script> /* * 多图预览上传组件 * by vcxiaohan 2016/8/5 * * 调用示例： * H5_upload('../../servlet/AQ?s=uf', $('.file'), '', function(data) { * console.log(data); * }); */ //样式 $('head').append('<style>.upFileCtn{width:50%;background:#3d3f40;padding:10px;border-radius:5px;margin:20px auto 5px auto;position:relative;text-align:center}.upFileItem{display:inline-block;padding:0 5px}.upFileImg{border:0;max-height:100px}.upFileName{color:#fff;font-size:12px;text-align:center;margin-bottom:5px}.upFileAbort{position:absolute;right:0;top:-10px;background:#3d3f40;color:#fff;border-radius:100px;font-size:12px;padding:4px;cursor:pointer}.upFileOuter{height:5px;background:#1a1a1a;position:relative;border-radius:5px;overflow:hidden}.upFileInner{display:inline-block;height:100%;background:#5e90d6;position:absolute;top:0;left:0}</style>'); //无法预览base64 var base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABYCAYAAABiQnDAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI1Q0NBQjg1NUExNzExRTY5RTEzREZFNTRENzc4RkFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI1Q0NBQjg2NUExNzExRTY5RTEzREZFNTRENzc4RkFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjVDQ0FCODM1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjVDQ0FCODQ1QTE3MTFFNjlFMTNERkU1NEQ3NzhGQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+S+GgAAAGC0lEQVR42uyc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'; var fileData = [];//fileData 为数组 //上传方法 function H5_upload(url, maxNum, $trigger, $ctn, startcall, callback, type, typecall) {//url-上传接口 maxNum-单次最大上传数量 $trigger-触发上传的input $ctn-上传进度的显示框 startcall-开始上传时的回调 callback-上传结束后的回调 type-允许上传的文件格式，如：gif|jpeg|bmp|jpg|png typecall-不符合文件类型时的回调 //自动上传 $trigger.on('change', function() { fileData = []; try { var len = maxNum ? (maxNum>$trigger[0].files.length?$trigger[0].files.length:maxNum) : $trigger[0].files.length; for(var i=0; i<len; i++) {//IE9-不支持files fileData[i] = $trigger[0].files[i]; } autoUpload(url, $trigger, $ctn, startcall, callback, type, typecall); }catch(e) {} }); } //自动上传 function autoUpload(url, $trigger, $ctn, startcall, callback, type, typecall) { if(!fileData[0]) { return; } uploadFile({ url: url, data: { file: fileData,//fileData 为数组 }, beforeload: function(formData) { var noSuit = [];// 不符合类型的文件 typeReg = new RegExp('\.'+ type, 'i'); for(var key in formData) { var val = formData[key]; if(val instanceof Array) {//hack数组对象 for(var i=0,len=val.length; i<len; i++) { if(typeReg.test(val[i].name)) {// 文件类型允许 }else {// 文件类型禁止 noSuit.push(val[i]); val[i] = []; } } } } typecall && typecall(noSuit); return formData; }, loadstart: function(e, ran, xhr) { startcall && startcall(ran);//开始时的回调 var $upFileCtn = $('<div class="'+ ran +' upFileCtn"></div>'), $upFileAbort = $('<span class="upFileAbort">x</span>'), $upFileOuter = $('<div class="upFileOuter"></div>'), $upFileInner = $('<em class="upFileInner"></em>'); for(var i=0,len=fileData.length; i<len; i++) { if(!(fileData[i] instanceof Array)) { var $upFileItem = $('<div class="upFileItem" size="'+ fileData[i].size +'"></div>'), $upFileName = $('<p class="upFileName" size="'+ fileData[i].size +'" hasRead="0">'+ fileData[i].name +'</p>'); $upFileName.appendTo($upFileItem); $upFileItem.appendTo($upFileCtn); try { var reader = new FileReader();//IE9-不支持FileReader if(fileData[i].type.indexOf('image')+1) {//可预览 reader.readAsDataURL(fileData[i]); reader.onload = function(e) { var $upFileImg = $('<img class="upFileImg" src="'+ e.target.result +'">'); var $upFileName = $('.upFileName'); for(var j=0,len=$upFileName.length; j<len; j++) { var $cur_upFileName = $upFileName.eq(j); if((e.total==$cur_upFileName.attr('size')) && !parseInt($cur_upFileName.attr('hasRead'))) { $cur_upFileName.attr('hasRead', '1').before($upFileImg); break; } } } }else { var $upFileImg = $('<img class="upFileImg" src="'+ base64 +'">'); $upFileImg.insertBefore($upFileName); } }catch(e) {} } } $upFileCtn.append($upFileAbort); $upFileCtn.append($upFileOuter); $upFileOuter.append($upFileInner); ($ctn || $('body')).append($upFileCtn); //取消上传 $upFileAbort.on('click', function() { xhr.abort(); $upFileCtn.remove(); $('.FA_'+ ran).parents('.MN_ask').remove(); }); $trigger[0].value = null;//清空文件路径 }, progress: function(e, ran, xhr) { if (e.lengthComputable) { var $upFileInner = $('.'+ ran +' em'); $upFileInner.width(e.loaded/e.total*100 +'%'); } }, load: function(e, ran) { var $upFileCtn = $('.'+ ran).remove(); callback && callback(JSON.parse(e.currentTarget.response), ran); } }); } //上传文件 function uploadFile(options) { var form = new FormData(),//FormData 对象 ran = ('ran'+ Math.random()).replace(/\./, ''),//唯一标识符 formData = options.data;// 表单数据载体数组 formData = options.beforeload(formData); var formLen = false; for(var key in formData) { var val = formData[key]; if(val instanceof Array) {//hack数组对象 for(var i=0,len=val.length; i<len; i++) { if(!(val[i] instanceof Array)) { form.append(key, val[i]);//增加表单数据 formLen = true; } } } } if(formLen) {// 符合文件类型 //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open("post", options.url, true); //开始传输 xhr.addEventListener("loadstart", function(e) { options.loadstart(e, ran, xhr);//xhr用于取消上传 }); //传输中 xhr.upload.addEventListener("progress", function(e) { options.progress(e, ran, xhr); }); //传输成功 xhr.addEventListener("load", function(e) { options.load(e, ran); }); xhr.send(form); }} </script> <script> ;$(function() { // 上线接口，请忽略 $.ajax({ url: '/servlet/AQ?s=p&sysNum=14464304598886414' }) //调用示例 H5_upload('/servlet/AQ?s=uf', 10, $('.file'), $('.msgCtn'), function(ran) {//url-上传接口 maxNum-单次最大上传数量 $trigger-触发上传的input $ctn-上传进度的显示框 startcall-开始上传时的回调 callback-上传结束后的回调 type-允许上传的文件格式，如：gif|jpeg|bmp|jpg|png typecall-不符合文件类型时的回调 $('.msgCtn').append('<br>开始上传时的展示框唯一标识：'+ ran); }, function(data, ran) { $('.msgCtn').append('<br>上传结束后的展示框唯一标识：'+ ran); $('.msgCtn').append('<br>后台返回数据：'+ JSON.stringify(data)); }, 'png|jpg|mp3', function(noSuit) { if(noSuit[0]) { $('.msgCtn').append(noSuit.length +'个文件不符合图片类型，已忽略'); } }); }); </script> </body> </html> 1 0
- js实现多图上传和预览(包含表单上传、ajax上传)
- JS实现图片的上传和预览
- js实现图片预览和FormData上传
- 文件上传+ajax 实现表单文件上传
- JS简单实现多图片预览上传
- js实现图片上传预览
- js实现图片上传预览
- js实现图片上传预览
- js实现图片上传预览
- js上传图片预览实现
- js实现图片上传预览
- js实现图片上传预览
- [JS]实现图片上传预览
- ajax上传form表单包含文件
- 文件上传（表单上传和ajax异步上传）
- ajax 上传图片预览
- FileReader+Ajax+PHP实现异步上传图片和预览
- jQuery+Ajax实现图片的预览和上传
- Cocos2d-x开发系列 交叉开发模式二 初始化和重启
- MVP模式在Android项目中的使用
- Android中Button文字不能铺满解决方法
- 同一个页面，多个script标签中Javascript执行问题
- HDU2032 杨辉三角
- js实现多图上传和预览(包含表单上传、ajax上传)
- SDUTACM打字系统初体验
- 二维码的生成与识别
- mac安装pip
- Win7 IIS建站
- Java(Android)中线程池的使用
- 海量数据处理专题
- Get Java System Properties and Get OS Envs
- Hibernate深入学习(五）：集合的检索策略
