工作中的遇到的需求，前端文件批量上傳，由於我之前沒咋接觸過前端，之前學過一點vue，jquery 這種還真沒有使用過。
使用的是提交 表單的模式 FormData 提交的
代碼如下：
聲明全局對象 var fd = new FormData();
function selectFileChanged(files) {
if (files.length < 1) return;
var file = document.getElementById('UploadFile');
var appElement = document.querySelector('[ng-controller=formController]');
var $scope = angular.element(appElement).scope();
console.log("文件------------------", files);
if ($scope.fileNameList == null || $scope.fileNameList == undefined || $scope.fileNameList == "") {
$scope.fileNameList = [];
}
var imgFileSize = 0;
let imgList = [];
var fileList = files;
var WaringInfo = "";
for (var i = 0; i < fileList.length; i++) {
var imgSrcI = getObjectURL(fileList[i]);
uploadFile(fileList[i])
var res = createFileInfo(fileList[i].name, fileList[i].size, imgSrcI)
var ss = $scope.fileNameList.find(a => a.name == fileList[i].name);
if (!ss) {
$scope.fileNameList.push(res);
}
else {
var itemwaing = fileList[i].name + "文件命名重復，請重新選擇"
fileErrorWaing.push(itemwaing)
}
}
for (var i = 0; i < $scope.fileNameList.length; i++) {
imgFileSize = Number(imgFileSize) + Number(($scope.fileNameList[i].filesize / (1024)).toFixed(2));
}
$scope.fileAllSizes = imgFileSize;
WaringInfo = "共選擇" + fileList.length + "張圖片," + "大小為" + Math.ceil(imgFileSize).toFixed(2) + "M。"
$scope.WaringInfo = WaringInfo;
$scope.$apply();
if ($scope.fileNameList.length > 100 || $scope.fileAllSizes > 50) {
//$("#WaringInfo").css("color", "red");
document.getElementById("WaringInfo").style.color = "red";
} else {
//$("#WaringInfo").css("color", "black");
document.getElementById("WaringInfo").style.color = "black";
}
file.outerHTML = file.outerHTML;
}
function uploadFile(file) {
console.log("添加文件 ", file.name)
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var blob = new Blob([reader.result], {
type: 'image/jpg'
});
fd.append(file.name, blob);
}
}
$.ajax({
url: '/Handler/Equ/GetEquData.ashx?action=EquTextDataImport&type=' + importTag,
type: 'post',
processData: false,
contentType: false,
data: fd,
success: function (data) {
if (data.Result == 100) {
$scope.msgError = data.Data;
$scope.fileNameList = [];
$scope.fileAllSizes = 0;
fd = new FormData();
KXO.dia.msg(data.Msg);
KXO.frm.getWin().$("#btnSearch").click();
$('#UploadFile').val("");
$('#fileList').val("")
}
}
})