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}！"
});
bootstrap fileinput 上传文件的更多相关文章
- bootstrap fileinput上传文件
参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974 https://www.cnblogs.com/parker-y ...
- .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
- 使用bootstrap创建上传文件
1.导入样式,注意顺序 <!-- bootstrap样式 --> <link rel="stylesheet" href="/static/bootst ...
- bootstrap改变上传文件按钮样式，并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
- bootstrap fileinput上传返回400，404，500 等错误替换
$(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 【Bootstrap】bootstrap-fileinput上传文件插件
[bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...
随机推荐
- AtCoder Grand Contest 002 F：Leftmost Ball
题目传送门:https://agc002.contest.atcoder.jp/tasks/agc002_f 题目翻译 你有\(n*k\)个球,这些球一共有\(n\)种颜色,每种颜色有\(k\)个,然 ...
- WPF GridView中的CellTemplate失效的原因
最近做一个ListView的Style时,发现一个问题, 就是我的GridView的GridViewColumn的CellTemplate无论是用StaticResource还是DynamicReso ...
- python+ mysql存储二进制流的方式
很多时候我们为了管理方便会把依稀很小的图片存入数据库,有人可能会想这样会不会对数据库造成很大的压力,其实大家可以不用担心,因为我说过了,是存储一些很小的图片,几K的,没有问题的! 再者,在这里我们是想 ...
- 事务之六：spring 嵌套事务
一.基本概念 事务的隔离级别,事务传播行为见<事务之二:spring事务(事务管理方式,事务5隔离级别,7个事务传播行为,spring事务回滚条件) > 二. 嵌套事务示例 2.1.Pro ...
- ie8兼容rgba的方法
现在做个网页还得考虑ie8,只想说:尼玛! 但是没办法,屈于淫威也得弄. 首先说下rgba的含义吧,rgba,r代表red,g代表green,b代表blue,a代表透明度. filter:progid ...
- shader之顶点着色器
Vertex Shader 是渲染管道中一个可编程的模块,用于处理独立的顶点.Vertex Shader接收Vertex Attribute Data,由定点数组对象通过渲染指令来生成. Vertex ...
- 5. 通过PHP反序列化进行远程代码执行
php序列化与反序列化 最近准备复现一下ecshop2.x,3.x的注入漏洞,其中涉及到了php反序列化的问题,由于之前太小白 ,导致粗心大意,所以此对php反序列化漏洞进行更详细的分析. 提起php ...
- jmeter压力测试报告
XXX压力测试报告 时间:2015-08-04 测试人员:xxx 目录 XXX压力测试报告... 1 一 测试 ...
- 无监督学习：Deep Auto-encoder（深度自动编码器）
一 Auto-encoder NN Encoder & NN Decoder 要一起训练. 二 Starting from PCA 三 Deep Auto-encoder PCA&De ...
- [Xcode 实际操作]六、媒体与动画-(11)UIView视图卷曲动画的制作
目录:[Swift]Xcode实际操作 本文将演示UIView视图卷曲动画的制作. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit cla ...