最近用到文件上传功能，
说实话：以前遇到过一次，COPY了别人的代码
结束！
这次又要用，可是看到别人很酷的文件上传功能，心痒了！
好吧。简单的办法，找控件：
bootstrap fileinput
真是好看：
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
可是好用吗？不知道。用吧！
-----------------------------------------------
苦难开始了！
因为没有用过，所以还 直接COPY别的代码：（http://blog.csdn.net/doc_wei/article/details/53783790）
尽管写的很详细了，但还是不太懂！
总是提示：
405 method not allowed!
提示用了POST 请求。找了N种方案……
此处省略N万字……
最后才发现我用错了：
oFile.Init = function(ctrlName, uploadUrl) { var control = $('#' + ctrlName); //初始化上传控件的样式 control.fileinput({ language: 'zh', //设置语言 uploadUrl: uploadUrl, //上传的地址
}
我一直把这个uploadUrl当成是文件上传保存的文件夹。
（JS怎么可能会在服务器上存文件，这个理解可是差了十万八千里呀）
因为是个文件夹，不接受任何的POST，GET
即便是我给了所有的谓词允许
而实际上：这个uploadUrl 是后台处理的上传文件的页面或是一般处理程序
比如：A.aspx 或 fileHandler.ashx
我用的是 .ashx
using System; using System.Web; using System.Text; public class HandlerFile : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "application/json"; HttpPostedFile uploadFile = context.Request.Files[0]; string fileName = uploadFile.FileName; int fileSize = uploadFile.ContentLength; string fileExt = System.IO.Path.GetExtension(fileName).ToLower(); string directoryPath = "~/upload/"; uploadFile.SaveAs(System.Web.HttpContext.Current.Server.MapPath(directoryPath) + fileName); context.Response.Write("{"fileName":"+"""+fileName+""}"); } public bool IsReusable { get { return false; } } }
这样就保存好了！
//注意：这里保存，需要设置 文件夹对对应的 写入权限，否则会收到 FORBBIDEN 提示
//我这里用到的是 根目录下的UPLOAD 文件夹，所以要设置这个文件夹的写入权限
JS部分：
menu={
fileInput: function ()
{
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
'theme': 'explorer',
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
});
//导入文件上传完成之后的事件
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
console.dir(data); //这是在别人的指点下才会用的，可以查看对象，这里主要是JSON对象
alert(data.files[0].name);
//$("#div_startimport").show();
});
}
return oFile;
},
onSubmit:function()
{
$("#uploadFile").fileinput("upload");
}
}
前台HTML：
//只是简单的示例而已，大家看一眼
//这里不需要点击SUBMIT 按钮，只接点击控件上的上传文件即可
//1、如果需要通过点击SUBMIT再上传，需要 初始化时设置显示上传按键为FALSE
// showUpload:false 不显示上传按钮
// 在SUBMIT 的CLICK 事件中调用 上传事件
// submitClick="menu.onSubmit();"
//2、如果想传递其他参数，则需要设置
// uploadExtraData 选项，
<body style="padding:16px;"> <div class="panel panel-default"> <div class="panel-heading"> this is a test </div> <div class="panel-body"> <form enctype="multipart/form-data" action="../handlerFile.ashx"> <!--<input id="kv-explorer" type="file" multiple>--> <input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" /> <br> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </form> </div> </div> </body> <script type="text/javascript"> $(document).ready(function () { var oFileInput = new menu.fileInput(); oFileInput.Init("uploadfile", "../handlerFile.ashx"); }); </script>
1、这里需要注意的地方：
uploadExtraData 的设置位置有要求（不知道是不是我没有弄明白）
我直接这样写代码是取不到值的：
onSubmit: function () { var parentID = common.QueryString("parentId").toString(); var level = common.QueryString("level").toString(); var extrData = {'parentId':parentID,'level':level}; ////console.log("the transfer URL____"+extrData); //$("#uploadfile").fileinput({}); oFileInput.uploadExtraData = extrData; //console.dir(oFileInput); $("#uploadfile").fileinput("upload"); }
需要在初始化里加入这个数据如下：
fileInput: function () { var oFile = new Object(); //初始化fileinput控件（第一次初始化） oFile.Init = function (ctrlName, uploadUrl) { var control = $('#' + ctrlName); var parentID = common.QueryString("parentId").toString(); var level = common.QueryString("level").toString(); var extrData = { 'parentId': parentID, 'level': level }; //var extrData = {'parentId':'1','level':'2'}; //console.dir(extrData); //初始化上传控件的样式 control.fileinput({ language: 'zh', //设置语言 uploadUrl: uploadUrl, //上传的地址 //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: true,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 uploadExtraData: extrData, 'theme': 'explorer', maxFileCount: 10, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！" }); //导入文件上传完成之后的事件 $("#uploadfile").on("fileuploaded", function (event, data, previewId, index) { console.dir(data); alert(data.files[0].name); }); } return oFile; }
2、需要注意的是：
uploadExtraData 格式不能写为 uploadExtraData: '{"parentId": "_parentID", "level":"_level"}' 外面加'' 变成字符串了
应该直接写成这样： uploadExtraData: {'parentId':'_parentId','level':'_level'} 这里是个对象
---------------------------------------------------------------------------
2017-09-14更:
------------------------------
把初始化方法改成这样可以将用户填写的数据传到后台:
control.fileinput({ language: 'zh', //设置语言 uploadUrl: uploadUrl, //上传的地址 //allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: true, //是否显示标题 browseClass: "btn btn-primary", //按钮样式 previewId, index uploadExtraData: function () { var data = { parentId: $("#fileType").val() }; return data; }, 'theme': 'explorer', maxFileCount: 10, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！" });