2248人阅读
成长路程（34）
bootstrap fileinput 的填坑感悟
& & & & & & &这个插件在demo的网站地址/file-preview-icons-demo；不得不承认这个插件很强大，作为一个文件上传插件做到了预览，而且还支持国际化，但是唯一的缺点就是api烂的到极点（应该说没有API）。
& & & & 即使没有API，也不能阻挡我使用的热情，即时前方再多的坑也被我一一填满。希望我这篇文章对于初学者有点帮助。废话不多说，开始填坑之旅。
& & & & 第一步开始知道需要应用的文件：
& & & & & css：&link rel=&stylesheet& href=&/libs/bootstrap/3.3.0/css/bootstrap.min.css&&
& & & & & &&link href=&${base}/style/admin/css/fileinput.min.css& rel=&stylesheet& /&
& & & & & &js: & &&script type=&text/javascript& src=&${base}/plugin/umeditor1_2_2/third-party/jquery.min.js&&&/script&
& & & & & &&script type=&text/javascript& src=&${base}/style/admin/js/fileinput.min.js&&&/script&
& & & & & &&script type=&text/javascript& src=&${base}/style/admin/js/fileinput_locale_zh.js&&&/script&
& & & & & &&script src=&/libs/bootstrap/3.3.0/js/bootstrap.min.js&&&/script&
& & & & & & &简单说明下css文件需要Bootstrap的css文件和该插件的css文件，js文件里导入fileinput_locale_zh.js，是为了支持中文，如果你的网站是支持国际化的，那还需要导入各国的js（这些都可以在这个插件的官方下载到，常见的国家都有）,jsp代码如下：
&div class=&form-group&&
&label class=&col-sm-2 control-label&&图片上传:&/label&
&div class=&col-sm-4&&
&input id=&file& name=&myfile& type=&file& data-show-caption=&true&&
&p class=&help-block&&支持jpg、jpeg、png格式，大小不超过2.0M&/p&
& & & & 导入后第二步要写js初始化这个插件，js代码如下：
& & & & &function initFileInput(ctrlName,uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl,
//上传地址
showUpload: false, //是否显示上传按钮
showRemove:true,
dropZoneEnabled: false,
showCaption: true,//是否显示标题
allowedPreviewTypes: ['image'],
allowedFileTypes: ['image'],
allowedFileExtensions:
['jpg', 'png'],
maxFileSize : 2000,
maxFileCount: 1,
//initialPreview: [
//预览图片的设置
&&img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/61
.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'&&,
}).on(&filebatchselected&, function(event, files) {
$(this).fileinput(&upload&);
.on(&fileuploaded&, function(event, data) {
$(&#path&).attr(&value&,data.response);
$(function () {
var path=&${base}/admin/product/upload.htm&;
initFileInput(&file&,path);
})& & & & & & &这是异步上传的js代码，而且还是选择图片自动上传的，当然你也可以修改这个js改为显示上传按钮，点击上传按钮才上传。因为该插件的异步上传是ajax提交，后台spring就按照ajax提交获取它的提交。java代码如下:
* 方法名: upload
* 方法作用: 文件异步上传
* 创建人：Wu Feng
* 创建时间： 下午10:16:36
* @param @param request
* @param @param product
* @param @return
* 返回值类型： String
@ResponseBody
@RequestMapping(&/upload&)
public String upload(MultipartHttpServletRequest request,Product product) {
//存放地址
String path=productService.upload(request);
}& & & & & & 将文件上传后，返回文件的路径，js代码： &$(&#path&).attr(&value&,data.response);将路径返回，赋值页面隐藏的路径字段。然后点击确定把数据插入进去。
& & & & & & &如果是同步提交，需要设置该插件配置参数uploadAsync，因为该插件默认是异步提交，因此把它设为false就行。js代码如下：
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
showUpload: false, //是否显示上传按钮
showRemove:true,
dropZoneEnabled: false,
showCaption: true,//是否显示标题
allowedPreviewTypes: ['image'],
allowedFileTypes: ['image'],
allowedFileExtensions:
['jpg', 'png'],
maxFileSize : 2000,
maxFileCount: 1,
uploadAsync: false, //同步上传
//initialPreview: [
//预览图片的设置
&&img src='http://127.0.0.1:8080/NewsManageSys/plugin/umeditor1_2_2/jsp/upload/61
.jpg' class='file-preview-image' alt='肖像图片' title='肖像图片'&&,
}//初始化就调用该方法
$(function () {
initFileInput(&file&);
}) & & & & & &java后台的代码：
* 方法名: save
* 方法作用: 产品保存
* 创建人：Wu Feng
* 创建时间： 下午07:26:08
* @param @param request
* @param @param news
* @param @return
* 返回值类型： String
@RequestMapping(&/save&)
public String save(MultipartHttpServletRequest request,Product product) {
//存放地址
String path=productService.upload(request);
product.setPath(path);
//存入产品信息
productService.insert(product);
return &redirect:/admin/product/add.htm&;
}& & & & & & 我这里采用的是同步提交，当用户选择文件后，就只有点击确定提交，而不是点击上传后，在点击确定提交，这样省去了一部操作，也是极大的方便。
& & & & & & 说到这里，大家觉得并没有坑，其实坑很多，比如我碰到了显示的一直都是英文，不是因为我没有导入fileinput_locale_zh.js，网上一查，原来是没有去掉class=“file”，非常感谢这个网站：，第二个坑就是我不想要显示拖拽区域，因为我喜欢简单点，那样我觉得太难看了，这时候你需要知道全部的配置信息，这里感谢这位csdn好友提供了配置信息（很给力）。网站地址如下：
& & & & & & 是不是该结束了，并没有，细心你的会发现，那我们编辑产品信息的时候，需要看他上传的产品图片，这个也简单，你只要在我注释的代码里写上图片地址就行了。附上我的劳动成品：
& & & & & &&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：49412次
积分：1136
积分：1136
排名：千里之外
原创：65篇
评论：30条
(2)(2)(4)(1)(1)(2)(1)(2)(2)(2)(3)(2)(2)(4)(5)(1)(2)(6)(15)(2)(10)(2)下次自动登录
现在的位置:
& 综合 & 正文
bootstrap中好看的文件上传样式（持续更新中）
一 直接使用bootstrap，利用简单的js控制
非常简单，如下：
&input id="lefile" type="file" style="display:none"&
&div class="input-append"&
&input id="photoCover" class="input-large" type="text" style="height:30"&
&a class="btn" onclick="$('input[id=lefile]').click();"&Browse&/a&
&script type="text/javascript"&
$('input[id=lefile]').change(function() {
$('#photoCover').val($(this).val());
效果如下：
不需要任何其他的js和css，只需要引入bootstrap和jquery即可
bootstrap-filestyle
注意：此样式只能使用bootstrap2的css，版本为bootstrap3的css是不兼容的！！（妈蛋我就因为这个测试了老半天。。摔
效果如下：
三 bootstrap-file-input
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&bootstrap.file-input&/title&
&link href="css/bootstrap.min.css" rel="stylesheet" /&
&script type="text/javascript" src="js/jquery-2.0.3.min.js"&&/script&
&script type="text/javascript" src="js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="js/bootstrap.file-input.js"&&/script&
&!-- Change the wording using a title tag --&
&input type="file" title="Search for a file to add 1" class="btn-primary"&
&input type="file" title="Search for a file to add 2" class="btn btn-primary"&
&input type="file" title="Search for a file to add 3" class="btn-primary"&
&input type="file" title="Search for a file to add 4" class="btn-primary"&
Disable the styling:
&!-- Disable the styling --&
&input type="file" data-bfi-disabled&
&script type="text/javascript"&
$('input[type=file]').bootstrapFileInput();
引入了bootstrap.file-input.js但是直接引入有点小问题，说找不到bootstrapFileInput这个方法。于是我就改了一点js：
Bootstrap - File Input
======================
This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.
Converts all
&input type="file"&
into Bootstrap buttons
&a class="btn"&Browse&/a&
$.fn.bootstrapFileInput = function() {
这里我直接用这个方法，把前面一行删掉就可以了
this.each(function(i,elem){
.........中间省略
// Add the styles before the first stylesheet
// This ensures they can be easily overridden with developer styles
var cssHtml = '&style&'+
'.file-input-wrapper { overflow: position: cursor: z-index: 1; }'+
'.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: top: 0; left: 0; cursor: opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }'+
'.file-input-name { margin-left: 8 }'+
'&/style&';
$('link[rel=stylesheet]').eq(0).before(cssHtml);
好了，到了看效果的时候啦~~
Fine Uploader
在官网下载是收费的。。我在github下载了一个。
下载解压后是这样的：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&bootstrap.file-input&/title&
&link href="css/bootstrap.min.css" rel="stylesheet" /&
&link href="css/fineuploader.css" rel="stylesheet" /&
&script type="text/javascript" src="js/jquery-2.0.3.min.js"&&/script&
&script type="text/javascript" src="js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="js/all.fineuploader-4.3.1.min.js"&&/script&
&div id="manual-fine-uploader"&&/div&
&div id="triggerUpload" class="btn btn-primary" style="margin-top: 10"&
&i class="icon-upload icon-white"&&/i& Upload now
$(document).ready(function() {
var manualuploader = $('#manual-fine-uploader').fineUploader({
request: {
endpoint: 'server/handleUploads'
autoUpload: false,
uploadButton: '&i class="icon-plus icon-white"&&/i& Select Files'
$('#triggerUpload').click(function() {
manualuploader.fineUploader('uploadStoredFiles');
$(document).ready(function () {
$('#fine-uploader').fineUploader({
request: {
endpoint: 'server/handleUploads'
&!-- Fine Uploader CSS
====================================================================== --&
&!-- Fine Uploader DOM Element
====================================================================== --&
&div id="fine-uploader"&&/div&
&!-- Fine Uploader template
====================================================================== --&
&script type="text/template" id="qq-template"&
&div class="qq-uploader-selector qq-uploader"&
&div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone&
&span&Drop files here to upload&/span&
&div class="qq-upload-button-selector qq-upload-button"&
&div&Upload a file&/div&
&span class="qq-drop-processing-selector qq-drop-processing"&
&span&Processing dropped files...&/span&
&span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"&&/span&
&ul class="qq-upload-list-selector qq-upload-list"&
&div class="qq-progress-bar-container-selector"&
&div class="qq-progress-bar-selector qq-progress-bar"&&/div&
&span class="qq-upload-spinner-selector qq-upload-spinner"&&/span&
&span class="qq-edit-filename-icon-selector qq-edit-filename-icon"&&/span&
&span class="qq-upload-file-selector qq-upload-file"&&/span&
&input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"&
&span class="qq-upload-size-selector qq-upload-size"&&/span&
&a class="qq-upload-cancel-selector qq-upload-cancel" href="#"&Cancel&/a&
&a class="qq-upload-retry-selector qq-upload-retry" href="#"&Retry&/a&
&a class="qq-upload-delete-selector qq-upload-delete" href="#"&Delete&/a&
&span class="qq-upload-status-text-selector qq-upload-status-text"&&/span&
js和css，你们在文件夹里搜索就能找到，但是有一个all.fineuploader-4.3.1.min.js，是我在官网用chrome审查元素copy下来的。。经测试可以用
注意中间代码中的Template
如果没有这一段，console将会报错：
然后我查到一个原因：
大家可以阅读下，就是必须要有一个模板文件才可以运行。
效果如下：（没导css对应的图片有点丑）
这个网页里还推荐了其他几款比较不错的。
&&&&推荐文章:
【上篇】【下篇】基于bootstrap的文件上传控件bootstrap fileinput
作者：程序猿hu
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了基于bootstrap的文件上传控件bootstrap fileinput，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了文件上传控件bootstrap fileinput的使用方法，供大家参考，具体内容如下
github地址：
1.下载压缩文件.
2.导入文件
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
如果需要考虑中文化，那么还需要引入文件：
bootstrap-fileinput/js/fileinput_locale_zh.js
&link type="text/css"rel="stylesheet"href="${ctx}/components/fileinput/css/fileinput.css" /&
&script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput.js"&&/script&
&script type="text/javascript" src="${ctx}/components/fileinput/js/fileinput_locale_zh.js"&&/script&
&input type="file" name="image" class="projectfile" value="image.png"/&
1. type=file和class=projectfile，指明其为input file类型。
2. name指定其在后台的获取key。
3. value指定其在展示的时候图片路径。
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "&i class='glyphicon glyphicon-king'&&/i&",
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具