Asp.NET MVC4 + Ajax 实现多文件上传

最新推荐文章于 2021-08-06 08:08:34 发布

转载最新推荐文章于 2021-08-06 08:08:34 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liangwenchao-912/p/6106010.html

文章标签：

#测试 #javascript #c# #ViewUI

本文介绍如何利用纯JavaScript与jQuery实现多文件上传功能，并展示上传进度条及百分比。涵盖HTML表单设计、JavaScript处理文件上传、进度监听及C#后端文件保存过程。

本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html

JS部分测试可以，jQuery部分没有测试先留着

HTML

<form id="form1" name="form1">
         <input type="file" name="fileToUpload" id="fileToUpload"  multiple="multiple"  />
         <progress id="progressBar" value="0" max="100"></progress>
         <span id="percentage"></span>
         <input type="button" onclick="UpladFile()" value="Upload" />
</form>

<script type="text/javascript">
    function UpladFile() {
        // js 获取文件对象
        var fileObj = document.getElementById("fileToUpload2").files; 
        // 接收上传文件的后台地址 
        var FileController = "/Home/Upload";                    
    
        // FormData 对象
        var form = new FormData();
        // 可以增加表单数据
        form.append("author", "hooyes");
        // 文件对象                       
        for (var i = 0; i < fileObj.length; i++)                 
            form.append("file" + i, fileObj[i]);
    
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
            alert("上传完成!");
        };
        xhr.upload.addEventListener("progress", progressFunction, false);
        xhr.send(form);
    }
    
    function progressFunction(evt) {
        var progressBar = document.getElementById("progressBar");
        var percentageDiv = document.getElementById("percentage");
        if (evt.lengthComputable) {
            progressBar.max = evt.total;
            progressBar.value = evt.loaded;
            percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
        }
    }  
   </script>

[HttpPost]
        public ActionResult Upload()
        {
            HttpFileCollectionBase fileToUpload = Request.Files;
            foreach (string file in fileToUpload)
            {
                var curFile = Request.Files[file];
                if (curFile.ContentLength < 1) continue;
                string path = System.IO.Path.Combine(Server.MapPath("~/Upload"), System.IO.Path.GetFileName(curFile.FileName));
                curFile.SaveAs(path);
            }
            return RedirectToAction("Index");
        }

jQuery

<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').submit(function () {
            var formdata = new FormData();
            var fileObj = document.getElementById("fileToUpload2").files;
            for (var i = 0; i < fileObj.length; i++)
                formdata.append("file" + i, fileObj[i]);
            $.ajax({
                type: 'POST',
                url: '/Home/Upload2',
                data: formdata,
                /** 
                *必须false才会自动加上正确的Content-Type 
                */
                contentType: false,
                /** 
                * 必须false才会避开jQuery对 formdata 的默认处理 
                * XMLHttpRequest会对 formdata 进行正确的处理 
                */
                processData: false
            }).then(function () {
                alert('done');
            }, function () {
                //failCal
            });
            return false;
        });
        $("#btn").bind("click", ajaxUpload);
    });
 
    function ajaxUpload() {
        $("#form1").submit();
    }
</script>

转载于:https://www.cnblogs.com/liangwenchao-912/p/6106010.html