官方教程：http://plugins.krajee.com/file-input#ajax-uploads
-
下載官方Demo后，引用樣式和js文件，此項目是將所有的文件放在一個文件下
<body>
<form>
<div>
<div class="modal-header">
<h4 class="modal-title" id="modalShow">[請選擇xml/docx]文件</h4>
</div>
<div class="modal-body">
<input type="file" name="model_file" id="model_file" multiple class="file-loading" />
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
var control = $("#model_file");
var uploadrul = "/bootstrap-fileinput-master/examples/UploadFile.ashx";
var upObj = {
language: 'zh', //設置語言
uploadUrl: uploadrul, //上傳的地址
uploadExtraData: { "savepath": "/bootstrap-fileinput-master/examples/" },//上傳至服務器的參數，非常重要
allowedFileExtensions: ['xml', 'docx', 'jpg', 'png', 'gif', 'rar', 'doc'],//接收的文件后綴
showUpload: true, //顯示批量上傳按鈕
showCaption: false,//是否顯示標題
browseClass: "btn btn-primary", //按鈕樣式
dropZoneEnabled: true,//是否顯示拖拽區域
maxFileSize: 4096,//單位為kb，如果為0表示不限制文件大小
minFileCount: 0,
maxFileCount: 10,
msgSizeTooLarge: " \"{name}\" 大小為({size} KB) 最大文件大小為 {maxSize} KB.請重新上傳!",//文件的實際大小有些許偏差
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！",
allowedPreviewTypes: ['image']//能夠預覽的文件類型，如果不限制。文件預覽時可能很慢
};
$('#modalShow').html("[請選擇"+upObj.allowedFileExtensions+"]文件");
control.fileinput(upObj);
//導入文件上傳成功之后的事件
$("#model_file").on("fileuploaded", function (event, data, previewId, index) {
});
//導入文件上傳失敗之后的事件
$('#model_file').on('fileuploaderror', function (event, data, msg) {
var msg= data.response;
});
});
</script>
</body>
1 /// <summary> 2 /// UploadFile 的摘要說明 3 /// </summary> 4 public class UploadFile : IHttpHandler 5 { 6 7 public void ProcessRequest(HttpContext context) 8 { 9 string json = "{\"msg\":\"上傳成功!\"}"; 10 try 11 { 12 context.Response.ContentType = "text/plain"; 13 Stream sr = context.Request.InputStream; 14 byte[] bt = new byte[sr.Length]; 15 HttpPostedFile file = context.Request.Files["model_file"]; 16 string savepath = context.Request["savepath"];//獲取文件保存的路徑 17 string fileName = file.FileName; 18 sr.Read(bt, 0, bt.Length); 19 savepath = context.Server.MapPath(savepath) + "\\" + fileName; 20 FileStream fs = new FileStream(savepath, FileMode.Create); 21 fs.Write(bt, 0, bt.Length); 22 fs.Close(); 23 sr.Close(); 24 } 25 catch (Exception ex) 26 { 27 //失敗時返回的參數必須加 error鍵 28 json = "{\"error\":\""+ex.Message+"\"}"; 29 } 30 context.Response.Write(json); 31 context.Response.End(); 32 } 33 34 public bool IsReusable 35 { 36 get 37 { 38 return false; 39 } 40 } 41 }
-
上傳效果圖，支持不同類型的文件同時上傳，支持圖片預覽。很不錯吧……
-
Demo下載：
算了網不行，傳不上去233