当前位置：首页 >前端技术 > bootstrap fileinput 上传文件

bootstrap fileinput 上传文件

前端技术

最近用到文件上传功能，

说实话：以前遇到过一次，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 {retu 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();});}retu 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);});}retu 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()};retu data;},'theme': 'explorer',maxFileCount: 10, //表示允许同时上传的最大文件个数enctype: 'multipart/form-data',validateInitialCount: true,previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"});