最近用到文件上传功能，
说实话：以前遇到过一次，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当成是文件上传保存的文件夹。
因为是个文件夹，不接受任何的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; ???????} ???}}这样就保存好了！
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); ???????????????alert(data.files[0].name); ???????????????//$("#div_startimport").show(); ???????????}); ???????} ???????return oFile; ???}
}前台HTML：
<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>bootstrap fileinput 上传文件
原文地址：http://www.cnblogs.com/ssqhan/p/7503011.html