1.h5 圖片異步上傳

（1） 異步上傳input觸發onchange事件的時候，就把圖片上傳至服務器。後臺可能會返回圖片的鏈接等信息，前臺可以把圖片信息展示給用戶看。

（2） 另一種情況可能需要前臺自己重寫提交（如下圖）: 顯示圖片的時候，添加一個type=‘hidden‘的input框，用來存後臺需要提交的東西（後臺會返回，只需要用input存起來）

2.h5 圖片同步上傳

（1） 同步上傳。把圖片獲取，預覽出來。然後在提交服務器

（代碼）

/**
* tinyImgUpload
* @param ele [string] [生成組件的元素的選擇器]
* @param options [Object] [對組件設置的基本參數]
* options具體參數如下
* path 圖片上傳的地址路徑 必需
* onSuccess(res) 文件上傳成功後的回調 參數為返回的文本 必需
* onFailure(res) 文件上傳失敗後的回調 參數為返回的文本 必需
* @return [function] [執行圖片上傳的函數]
* 調用方法
* tinyImgUpload(‘div‘, options)
*/
function tinyImgUpload(ele, options) {
// 判斷容器元素合理性並且添加基礎元素
var eleList = document.querySelectorAll(ele);
if(eleList.length == 0){
console.log(‘綁定的元素不存在‘);
return;
}else if(eleList.length>1){
console.log(‘請綁定唯一元素‘);
return;
}else {
eleList[0].innerHTML =‘<div id="img-container" >‘+
‘<div class="img-up-add img-item"> dsafa<span class="img-add-icon">+</span> </div>‘+
‘<input type="file" name="files" id="img-file-input" multiple>‘+
‘</div>‘;
var ele = eleList[0].querySelector(‘#img-container‘);
ele.files = []; // 當前上傳的文件數組
}

// 為添加按鈕綁定點擊事件，設置選擇圖片的功能
var addBtn = document.querySelector(‘.img-up-add‘);
addBtn.addEventListener(‘click‘,function () {
document.querySelector(‘#img-file-input‘).value = null;
document.querySelector(‘#img-file-input‘).click();
return false;
},false)

// 預覽圖片
//處理input選擇的圖片
function handleFileSelect(evt) {
var files = evt.target.files;

for(var i=0, f; f=files[i];i++){
// 過濾掉非圖片類型文件
if(!f.type.match(‘image.*‘)){
continue;
}
// 過濾掉重復上傳的圖片
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
tip = true;
break;
}
}
if(!tip){
// 圖片文件綁定到容器元素上
ele.files.push(f);

var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement(‘div‘);
oDiv.className = ‘img-thumb img-item‘;
// 向圖片容器裏添加元素
oDiv.innerHTML = ‘<img class="thumb-icon" src="‘+e.target.result+‘" />‘+
‘<a href="javscript:;" class="img-remove">x</a>‘

ele.insertBefore(oDiv, addBtn);
};
})(f);

reader.readAsDataURL(f);
}
}
}
document.querySelector(‘#img-file-input‘).addEventListener(‘change‘, handleFileSelect, false);

// 刪除圖片
function removeImg(evt) {
if(evt.target.className.match(/img-remove/)){
console.log(‘3‘,ele.files);
// 獲取刪除的節點的索引
function getIndex(ele){

if(ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for(var i = 0; i < oChilds.length; i++){
if(oChilds[i] == ele)
return i;
}
}else {
return -1;
}
}
// 根據索引刪除指定的文件對象
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if(index < 0){
return;
}else {
ele.files.splice(index, 1);
}
console.log(‘4‘,ele.files);
}
}
ele.addEventListener(‘click‘, removeImg, false);

// 上傳圖片
function uploadImg() {
console.log(ele.files);

var xhr = new XMLHttpRequest();
var formData = new FormData();

for(var i=0, f; f=ele.files[i]; i++){
formData.append(‘files‘, f);
}

console.log(‘1‘,ele.files);
console.log(‘2‘,formData);

xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
}else {
options.onFailure(xhr.responseText);
}
}
}

xhr.open(‘POST‘, options.path, true);
xhr.send(formData);

}
return uploadImg;
}

H5 圖片上傳