js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例
包含的知识点有：(仅考虑手机端，pc兼容性不清)
1.浏览器自带的表单上传(页面会跳转)
2.ajax上传(异步刷新、自动上传、可取消上传)
3.一次实现多图上传
4.上传前图片预览
5.base64图片应用
6.创建元素的简单封装
7.insertAfter的封装
7.ajax简单封装
8.手机端标准html书写
9.jquery实现相同功能且封装成jq插件，方便调用
原生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">
<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;
}
body, html {
width: 100%;
height: 100%;
}
body {
height: 3rem;
}
</style>
</head>
<body>
<input type="file" class="file" multiple="multiple">
<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, $trigger, $ctn, callback) {//$trigger-触发的input $ctn-添加到的父级 callback-请求成功回调
//自动上传
$trigger.on('change', function() {
fileData = [];
try {
for(var i=0,len = $trigger[0].files.length; i<len; i++) {//IE9-不支持files
fileData[i] = $trigger[0].files[i];
}
autoUpload(url, $trigger, $ctn, callback);
}catch(e) {}
});
}
//自动上传
function autoUpload(url, $trigger, $ctn, callback) {
if(!fileData[0]) {
return;
}
uploadFile({
url: url,
data: {
file: fileData,//fileData 为数组
},
loadstart: function(e, ran, xhr) {
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++) {
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();
});
$trigger[0].value = null;//清空文件路径
},
progress: function(e, ran) {
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));
}
});
}
//上传文件
function uploadFile(options) {
var form = new FormData(),//FormData 对象
ran = ('ran'+ Math.random()).replace(/\./, '');//唯一标识符
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);
}
</script>
<script>
;$(function() {
//调用示例
H5_upload('../../servlet/AQ?s=uf', $('.file'), '', function(data) {
console.log(data);
});
});
</script>
</body>
</html>