MVC3+Html5+jquery_easyui做上传⽂件，带进度条
为了⽅便，进度条使⽤的是jquery 的 easy ui, ⽹上有下载.需要引⽤easy ui的样式以及脚本⽂件
如果不采⽤这样的进度条，也可以修改上传的Js以后⾃⼰做进度条.
1<script language="javascript" type="text/javascript">
网站系统源码2
3function fileSelected() {
4var file = ElementById('fileToUpload').files[0];
5var fileName = file.name;
6var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
7
8if (file_typename == '.xls') {//这⾥限定上传⽂件⽂件类型
9if (file) {
10
11                $("#uploadFile").show();集图网
12var fileSize = 0;
13if (file.size > 1024 * 1024)
14                    fileSize = (und(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
15else
16                    fileSize = (und(file.size * 100 / 1024) / 100).toString() + 'KB';
17
18                ElementById('fileName').innerHTML = '⽂件名: ' + file.name;
19                ElementById('fileSize').innerHTML = '⼤⼩: ' + fileSize;
20                ElementById('fileType').innerHTML = '类型: ' + pe;
21
22
23            }
24
25        }
26else {
27
28            $("#uploadFile").hide();
29            ElementById('fileName').innerHTML = "<span style='color:Red'>错误提⽰：上传⽂件应该是.xls后缀⽽不应该是" + file_typename + "，请重新选择⽂件</span>"
30            ElementById('fileSize').innerHTML ="";
31            ElementById('fileType').innerHTML ="";
32
33        }
34    }
35
36function uploadFile() {
装饰者设计模式37var fd = new FormData();
38        fd.append("fileToUpload", ElementById('fileToUpload').files[0]);
39var xhr = new XMLHttpRequest();
40        xhr.upload.addEventListener("progress", uploadProgress, false);
41        xhr.addEventListener("load", uploadComplete, false);
42        xhr.addEventListener("error", uploadFailed, false);
43        xhr.addEventListener("abort", uploadCanceled, false);
44        xhr.open("POST", "/Goods/ToLead");
45        xhr.send(fd);
46    }
47
48function uploadProgress(evt) {
49if (evt.lengthComputable) {
50var percentComplete = und(evt.loaded * 100 / al);
51            $('#progressNumber').progressbar('setValue', percentComplete);
52        }
网络运维与安全
53else {
54            ElementById('progressNumber').innerHTML = '⽆法计算';
55        }
56    }
57
58function uploadComplete(evt) {
59/* 服务器返回数据*/
60var message = sponseText;
61
62    }
63
64function uploadFailed(evt) {
65        alert("上传出错.");
66    }
67
68function uploadCanceled(evt) {
69        alert("上传已由⽤户或浏览器取消删除连接.");
70    }
71</script>
72<div data-options="region:'center',title:'货品管理',iconCls:'icon-ok'">
73<div >
74
75<div id="#DivUp">
76
77            @using (Html.BeginForm("ToLead", "Goods", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
78            {
79<div class="row">
80<label for="file">
81<h5>
82⽂件上传:</h5>
83</label>
84<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();"/>
85<a id="uploadFile" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="uploadFile()"> 86上传并导⼊</a>
87</div>
88
89<div id="fileName" >
90</div>
91<div id="fileSize" >
jquery下载文件请求92</div>
93<div id="fileType" >
94</div>
95
96<div id="progressNumber" class="easyui-progressbar" >
97</div>
98            }
99</div>
100</div>
101
102</div>
1///<summary>
2///上传⽂件
3///</summary>
4///<param name="fileToUpload"></param>
5///<returns></returns>
6        [HttpPost]
7        [ValidateInput(false)]
8public string ToLead(HttpPostedFileBase[] fileToUpload)
9        {
10try
11            {
12string FileUrl = string.Empty;
13foreach (HttpPostedFileBase file in fileToUpload)
14                {
15string path = System.IO.Path.Combine(Server.MapPath("~/FileUpLoad/Goods"), System.IO.Path.GetFileName(file.FileName));
16                    file.SaveAs(path);
17                    FileUrl = path;
18                }
transferable skill
19
20
21return"上传成功";
22            }
23
24catch {
25
26return"上传失败";
27            }
28
29        }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。