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[]; 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}!"
});
最新文章
- (2016弱校联盟十一专场10.3)	D	Parentheses
- atom编辑markdown之上传图片
- <;转>;两个蛋蛋的故事
- BZOJ-3226 校门外的区间 线段数+拆点(类似的思想)
- 获取txt文件指定行内容
- Educational Codeforces Round 4 D. The Union of k-Segments 排序
- poj 1180 斜率优化dp
- WMI使用的WIN32_类库名
- hdu 5424 Rikka with Graph II (BestCoder Round #53 (div.2))(哈密顿通路判断)
- Poj 3117 World Cup
- RunTime报错的一个原因,以及截图
- AVOIR发票的三种作用
- Symfony2源码分析——启动过程1
- JavaScript之面向对象学习一
- openGL点精灵PointSprite具体解释: 纹理映射,旋转,缩放,移动
- wap问答系统工作总结
- Unity协程实现伪加载页面
- 链接中 href=&#39;#&#39; 和 href=&#39;###&#39; 的区别
- Java连接并操作SQLServer数据库
- Android 动画:你真的会使用插值器与估值器吗?
热门文章
- Windows下Anaconda安装 python + tensorflow
- AndroidStudio启动时不自动打开项目
- Behave + Selenium(Python) 四
- CentOS虚拟机通过主机网络上网
- GET 和 POST两种调用方式
- VR虚拟现实眼镜那些事
- linux下安装Drcom
- day1 java基础
- 有两种分别用<;bgsound>;和<;embed>;<;/embed>;标签,当用<;embed>;插入背景音乐时可以设置宽度和高度为0,隐藏播放器。
- 7.12实习培训日志 Linux Docker