Input标选择多文件后如何上传

开发工具与关键技术：Visual Studio 2015 JavaScript
作者：宁佐潮
撰写时间：2019.4.18
根据上篇文章选择文件后，接下来便是上传文件
我这里上传文件在js这边采取的是for循环添加，添加file到new的formData,然后new一个XMLHttpRequest对象，因为是文件，所以用post提交，然后用send发送数据xhr.send(formData);
最后当i自加到选择文件的数量时，便是循环添加到了最后，输出一下添加的情况

//保存批量上传文件
function SaveBatch() {
    layer.alert("上传文件较多时，请耐心等待！", function () {
        var file = $("#filesArry")[0].files;
        var succeed = 0;
        var defeated = 0;
        var layuiIndex;
        if (file.length > 0) {
            //批量保存的歌曲文件上传
            for (var i = 0; i < file.length; i++) {
                var formData = new FormData();
                formData.append("file", file[i]);
                //=new一个XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                //=注册监听事件
                //发送成功事件
                xhr.onload = function (event) {
                    var strText = event.currentTarget.responseText;
                    if (strText == "true") {
                        succeed++;
                    } else {
                        defeated++;
                    }
                };
                //上传失败事件
                xhr.onerror = function (event) {
                    var strText = event.currentTarget.responseText;
                    if (strText == "true") {
                        succeed++;
                    } else {	
defeated++;		
}
                };
                //上传进度---会不断被调用
                xhr.upload.onprogress = function (event) {
                    if (event.lengthComputable) {
// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
              console.log(event.total + "--->" + event.loaded + "----->" + 
(event.loaded / event.total * 100) + "%");
                    }
                };
                //上传文件一定要用POST方式提交
                xhr.open("POST", "UpEeditorFilesArry");
                //打开加载层
                layuiIndex = layer.msg('上传中...', {
                    icon: 16,
                    time: 0,
                    shade: 0.3
                });
                //发送数据
                xhr.send(formData);
                if (i == (file.length - 1)) {
                    tabSinger.reload();
                    layer.close(layuiIndex);//关闭加载层
                    $("#modalInsertID").modal('hide');
                    layer.alert("添加成功" + succeed + "个！失败"+ defeated + "个");
                }
            }
        } else {
            layer.alert("请选择文件");
        }
});		
}

控制器这边就是根据传过来的文件信息，判断下不是空，判断下文件上传的指定路径存在否，然后把文件添加到指定路径

public ActionResult UpEeditorFilesArry(HttpPostedFileBase file)
{
    ReturnJsonVo returnJson = new ReturnJsonVo();
    try
    {
        if (file != null)
        {
            string fileName = file.FileName;
            if (!Directory.Exists(Server.MapPath("~/Content/music")))
            {
                Directory.CreateDirectory(Server.MapPath("~/Content/music"));
            }
            string filePath = Server.MapPath("~/Content/music/") + fileName;
            file.SaveAs(filePath);
            string str = fileName;
            returnJson.State = true;
            returnJson.Text = str;
        }
        else
        {
            returnJson.Text = "文件为空！";
        }
    }
    catch (Exception)
    {
        returnJson.Text = "数据异常";
    }
    return Json(returnJson, JsonRequestBehavior.AllowGet);
}