移動端一次上傳多個圖片（動態建立file型別的input）
阿新 • • 發佈：2019-02-15
描述
最近在做公司的一個移動端上傳圖片的業務，如果這是在PC端，將非常的簡單，因為給input設定屬性multiple後PC端按住ctrl鍵就可以一次性選擇多個圖片，但是在移動端確不可以，移動端選擇一張圖片後會自動返回到APP中，想再新增一張的話還需要再次進入，所以體驗不是很好，目前沒找到合適的方法，只能暫時先這樣了，我們今天的焦點是：如何一次性上傳多張圖片（注意：不是一次性選擇多個圖片）？
因為移動端無法一次性選擇多個圖片的緣故，用單個type=”file”的input也無法做到讓伺服器端接收到多個圖片源，所以解決思路就是：動態建立type=”file”的input，每新增一張圖片前，就建立一個type=”file”類，然後js控制立即觸發，即可進入到手機的圖片選擇介面，多張圖片新增完之後最後通過FormData將整個form表單（動態建立的type=”file”都在form中）一次性提交。
效果 ##
目錄結構
目錄結構很簡單，就用了jquery,這個大家自己下載一個，為了讓大家更多的將關注點放在技術功能上，在這裡我簡化了程式碼，去掉了bootstrap的樣式，但功能是完整的，下面是程式碼
toUpload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content toUpload.js
//選擇圖片，馬上預覽
function xmTanUploadImg(obj) {
var fl=obj.files.length;
for(var i=0;i<fl;i++){
var file=obj.files[i];
var reader = new FileReader();
//讀取檔案過程方法
reader.onload = function (e) {
var imgstr='<img src="'+e.target.result+'"/>';
var oimgbox=$("#images");
oimgbox.append(imgstr);
}
reader.readAsDataURL(file);
}
}
// 提交
function uploadFile() {
//看最後一個file型別的input是否有檔案，沒有則移除
if($("input[type='file']:last").prop('files')){
if($(":file").prop('files').length==0){
$("input[type='file']:last").remove();
if($("input[type='file']").length==0){
alert("請選擇圖片");
}
}
var form = new FormData($("#uploadForm")[0]);
$.ajax({
type:"post",
url:url,//根據自己專案的需要寫請求地址
data:form,
processData:false,
contentType:false,
success:function(msg){
console.log(msg);
},
error:function(e){
console.log(e.responseText);
}
})
}else{
alert("請選擇圖片");
}
}
//新增type="file"
function addinputFile(){
//檢查最後一個type="file"有沒有選擇圖片，沒有則去使用，不再建新的
var lastObj=$("input[type='file']:last");
if(lastObj.prop('files')){
if(lastObj.prop('files').length==0){
lastObj.click();
}else{
$(".inputFiles").append("<input type='file' name='fileAttach' multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
$("input[type='file']:last").click();
}
}else{
//第一個
$(".inputFiles").append("<input type='file' name='fileAttach' multiple='multiple' accept='image/*' onChange='xmTanUploadImg(this);' />");
$("input[type='file']:last").click();
}
}