MVC3+Html5+jquery_easyui做上传文件,带进度条

为了方便,进度条使用的是jquery 的 easy ui, 网上有下载.需要引用easy ui的样式以及脚本文件

如果不采用这样的进度条,也可以修改上传的Js以后自己做进度条.

 

 

 

<script language="javascript" type="text/javascript">

    function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        var fileName = file.name;
        var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
    
        if (file_typename == '.xls') {//这里限定上传文件文件类型
            if (file) {

                $("#uploadFile").show();
                var fileSize = 0;
                if (file.size > 1024 * 1024)
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                else
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

                document.getElementById('fileName').innerHTML = '文件名: ' + file.name;
                document.getElementById('fileSize').innerHTML = '大小: ' + fileSize;
                document.getElementById('fileType').innerHTML = '类型: ' + file.type;


            }

        }
        else {

            $("#uploadFile").hide();
            document.getElementById('fileName').innerHTML = "<span style='color:Red'>错误提示:上传文件应该是.xls后缀而不应该是" + file_typename + ",请重新选择文件</span>"
            document.getElementById('fileSize').innerHTML ="";
            document.getElementById('fileType').innerHTML ="";

        }
    }

    function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "/Goods/ToLead");
        xhr.send(fd);
    }

    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            $('#progressNumber').progressbar('setValue', percentComplete);
        }
        else {
            document.getElementById('progressNumber').innerHTML = '无法计算';
        }
    }

    function uploadComplete(evt) {
        /* 服务器返回数据*/
        var message = evt.target.responseText;
      
    }

    function uploadFailed(evt) {
        alert("上传出错.");
    }

    function uploadCanceled(evt) {
        alert("上传已由用户或浏览器取消删除连接.");
    }
</script>
<div data-options="region:'center',title:'货品管理',iconCls:'icon-ok'">
    <div style="margin: 70px;">
      
        <div id="#DivUp">
       
            @using (Html.BeginForm("ToLead", "Goods", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
            {    
                <div class="row">
                    <label for="file">
                        <h5>
                            文件上传:</h5>
                    </label>
                    <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" />
                    <a id="uploadFile" style=" display:none" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="uploadFile()">
                        上传并导入</a>
                </div>
        
                <div id="fileName" style="padding: 10px">
                </div>
                <div id="fileSize" style="padding: 10px">
                </div>
                <div id="fileType" style="padding: 10px">
                </div> 
             
                <div id="progressNumber" class="easyui-progressbar" style="width: 400px;">
                </div>
            }
        </div>
    </div>

</div>

 

        /// <summary>
        /// 上传文件
        /// </summary>
        /// <param name="fileToUpload"></param>
        /// <returns></returns>
        [HttpPost]
        [ValidateInput(false)]
        public string ToLead(HttpPostedFileBase[] fileToUpload)
        {
            try
            {
                string FileUrl = string.Empty;
                foreach (HttpPostedFileBase file in fileToUpload)
                {
                    string path = System.IO.Path.Combine(Server.MapPath("~/FileUpLoad/Goods"), System.IO.Path.GetFileName(file.FileName));
                    file.SaveAs(path);
                    FileUrl = path;
                }

                
                return "上传成功";
            }

            catch {

                return "上传失败";
            }

        }