網(wǎng)站中的上傳相信大家都不陌生，也算是一個(gè)小小的技術(shù)難點(diǎn)，尤其時(shí)在asp.net中，上傳的一些大小限制以及上傳的進(jìn)度的控制，以及用戶體驗(yàn)等方面，今天在這里分享一個(gè)在asp.net mvc模式下的文件上傳，同樣適用于其它web類型bootstrap-fileinput .
它來自一個(gè)開源項(xiàng)目 git：https://github.com/kartik-v/bootstrap-fileinput/
文檔地址：http://plugins.krajee.com/file-input
用一個(gè)下午的時(shí)間將文檔通讀了一次，并且做了根據(jù)文檔指示做出了一個(gè)小型的demo，效果出奇的好，如下是效果圖：
可以對(duì)文件預(yù)覽篩選，從客戶端就過濾一些不適用的文件，而且界面效果還特別美觀
如下是使用方式：或者直接參照代碼寫就可以
使用方式：
1.nuget:Install-Package bootstrap-fileinput
2.語言本地化｛下載fileinput_locale_zh.js｝或者修改Fileinput中的本地化詞匯
下載地址：https://github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales 【中文是zh.js】
文檔結(jié)構(gòu)：
3.文件大小限制：修改fileinput.js中的3195行 maxFilePreviewSize配置節(jié)點(diǎn)
maxFilePreviewSize: 25600, // 25 MB 默認(rèn)是25M，根據(jù)需要手動(dòng)調(diào)整
示例：前臺(tái) --代碼中的注釋已經(jīng)足夠解釋各配置項(xiàng)的作用，就不贅述了.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.css" rel="external nofollow" rel="stylesheet" /> <script src="~/Scripts/fileinput.js"></script> <script src="~/Scripts/fileinput_locale_zh.js"></script> <link href="~/Content/bootstrap-fileinput/css/fileinput.css" rel="external nofollow" rel="stylesheet" /> <script type="text/javascript"> $(function () { var control = $("#txt_file"); var uploadrul = "/Home/UploadFile"; control.fileinput({ language: 'zh', //設(shè)置語言 uploadUrl: uploadrul, //上傳的地址 allowedFileExtensions: ['xml','docx'],//接收的文件后綴 showUpload: true, //顯示批量上傳按鈕 showCaption: false,//是否顯示標(biāo)題 browseClass: "btn btn-primary", //按鈕樣式 //minImageWidth: 50, //圖片的最小寬度 //minImageHeight: 50,//圖片的最小高度 //maxImageWidth: 1000,//圖片的最大寬度 //maxImageHeight: 1000,//圖片的最大高度 //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小 //minFileCount: 0, maxFileCount: 100, enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！", }); //導(dǎo)入文件上傳完成之后的事件 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { }); }); </script></head><body> <div> <form> <div> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">[請(qǐng)選擇xml/docx]文件</h4> </div> <div class="modal-body"> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </div> </div> </form> </div></body></html> |
后臺(tái)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.IO;using System.Xml;using System.Xml.Schema;namespace UploadTest.Controllers{ public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public JsonResult UploadFile() { uploadResult result = new uploadResult(); var oFile = Request.Files["txt_file"]; result.fileName = oFile.FileName; Stream sm = oFile.InputStream; byte[] bt= new byte[sm.Length]; sm.Read(bt, 0, (int)sm.Length); FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+oFile.FileName,FileMode.Create); fs.Write(bt, 0, bt.Length); fs.Close(); fs.Dispose(); sm.Close(); sm.Dispose(); return Json(result, JsonRequestBehavior.AllowGet); } public class uploadResult { public string fileName { get; set; } public string error { get; set; } } }} |
為了在前臺(tái)正確的顯示文件的錯(cuò)誤信息，需要給前臺(tái)返回一個(gè)帶有error字段的json，其中error字段時(shí)必須的，否則無法顯示后臺(tái)回寫的錯(cuò)誤消息【這時(shí)必須的，官方文檔中明確指出】
后臺(tái)可以做到更細(xì)致的控制，并且支持多線程上傳
原文鏈接：http://www.cnblogs.com/zzfstudy/p/6339409.html
