bootstrap-fileinput之文件上传 | 一锅乱炖
此功能实现使用bootstrap-fileinput(fileinput.min.js)插件,主页地址：
MultipartFileSpring使用MultipartFile来进行多文件上传，需要配置一个multipartResolver的bean
@RequestMapping(value=”/parseAttr.json”, method = RequestMethod.POST) public ModelMap parseAttr(@RequestParam(“file”) MultipartFile uFile) {
ModelMap result = new ModelMap();
result.put(&keys&,set);
常用方法 MultipartFile file = new MultipartFile(); file.getOriginalFilename():获取上传文件的原名 file.getInputStream():获取文件流
form表单分两类上传：办事指南、典型案例。
&form role=&form& class=&form-horizontal& id=&importFile& method=&post& accept-charset=&utf-8& enctype=&multipart/form-data&&
&div class=&form-group&&
&label class=&col-lg-2 control-label& for=&descption&&文章类型&/label&
&div class=&col-lg-9&&
&select name=&descption& id=&descption& style=&padding: 6px 12line-height: 1.;
border: 1px solid #
border-radius: 4&&
&option value=&1&&办事指南&/option&
&option value=&2&&典型案例&/option&
&div class=&form-group&&
&label class=&col-lg-2 control-label& for=&fileInput&&文章上传&/label&
&div class=&col-md-9&&
&input id=&fileInput& name=&fileInput& type=&file& multiple
class=&file-loading&&
&div class=&btn-group& style=&margin-left: 160margin-right:5px&&
&button type=&button& class=&btn btn-success& id=&submitOK&&
&i class=&glyphicon glyphicon-check&&提交&/i&
&button type=&button& class=&btn btn-danger& data-dismiss=&modal&
id=&btn-close&&
&i class=&glyphicon glyphicon-remove&&关闭&/i&
js代码$(&#fileInput&).fileinput({
uploadUrl:&#&,//上传的地址
uploadAsync: false,
language : &zh&,//设置语言
showCaption: true,//是否显示标题
showUpload: false, //是否显示上传按钮
browseClass: &btn btn-primary&, //按钮样式
allowedFileExtensions: [&html&,&htm&], //接收的文件后缀
maxFileCount: 1,//最大上传文件数限制
maxFileSize: 1000,//最大上传文件大小
uploadAsync: true,
previewFileIcon: &&i class=&glyphicon glyphicon-file&&&/i&&,
allowedPreviewTypes: null,
previewFileIconSettings: {
&doc&: &&i class=&fa fa-file-word-o text-primary&&&/i&&,
&xls&: &&i class=&fa fa-file-excel-o text-success&&&/i&&,
&ppt&: &&i class=&fa fa-file-powerpoint-o text-danger&&&/i&&,
&jpg&: &&i class=&fa fa-file-photo-o text-warning&&&/i&&,
&pdf&: &&i class=&fa fa-file-pdf-o text-danger&&&/i&&,
&zip&: &&i class=&fa fa-file-archive-o text-muted&&&/i&&,
&htm&: &&i class=&fa fa-file-code-o text-info&&&/i&&,
&txt&: &&i class=&fa fa-file-text-o text-info&&&/i&&,
&mov&: &&i class=&fa fa-file-movie-o text-warning&&&/i&&,
&mp3&: &&i class=&fa fa-file-audio-o text-warning&&&/i&&,
previewFileExtSettings: {
&doc&: function(ext) {
return ext.match(/(doc|docx)$/i);
&xls&: function(ext) {
return ext.match(/(xls|xlsx)$/i);
&ppt&: function(ext) {
return ext.match(/(ppt|pptx)$/i);
&zip&: function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
&htm&: function(ext) {
return ext.match(/(php|js|css|htm|html)$/i);
&txt&: function(ext) {
return ext.match(/(txt|ini|md)$/i);
&mov&: function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
&mp3&: function(ext) {
return ext.match(/(mp3|wav)$/i);
上传文件可附加参数，通过uploadExtraData参数来实现。
uploadExtraData: function() {
var extraValue =
var radios = document.getElementsByName(&excelType&);
for(var i=0;i&radios.i++){
if(radios[i].checked){
extraValue = radios[i].
return {&excelType&: extraValue};
上传成功的回调函数：
$(&#fileInput&).on(&fileuploaded&, function(event, data, previewId, index) {
alertView(&上传成功!&);
上传失败的回调函数：
$(&#excelFile&).on(&fileuploaderror&, function(event, data, previewId, index) {
alertView(&上传文件不正确!&);
js提交带文件表单
$(&#submitOK&).click(function() {
cache: true,
type: &POST&,
url: &rest/guide/importfile&,
data: new FormData($(&#importFile&)[0]),// 你的formid
processData: false,
contentType: false,
error: function(request) {
alert(&上传失败&);
success: function(data) {
alert(&上传成功&);
alert(&上传失败&);
需要注意的以下几点：
processData设置为false。因为data值是FormData对象，不需要对数据做处理。
标签添加enctype=”multipart/form-data”属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由表单构造的FormData对象，且已经声明了属性enctype=”multipart/form-data”，所以这里设置为false。
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为input中声明的是name=”file”。
上传文件后台@RequestMapping(value = &/importfile&, method = RequestMethod.POST)
@ResponseBody
public boolean importfile(HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding(&utf-8&);
final String allowFileSuffix = &html,htm&;
String basePath = request.getSession().getServletContext().getRealPath(&/&);
String realpath =
// 检查输入请求是否为multipart表单数据。
if (ServletFileUpload.isMultipartContent(request)) {
DiskFileItemFactory dff = new DiskFileItemFactory();//获得磁盘文件条目工厂
dff.setSizeThreshold(1024000);// 指定在内存中缓存数据大小,单位为byte
ServletFileUpload upload = new ServletFileUpload(dff);// 创建该对象
upload.setFileSizeMax(5000000);//指定单个上传文件的最大尺寸
upload.setSizeMax();// 指定一次上传多个文件的总尺寸
upload.setHeaderEncoding(&utf-8&);
List&FileItem& fileItems = new ArrayList&FileItem&();
fileItems = upload.parseRequest(request);
} catch (FileUploadException e1) {
logger.error(&文件上传发生错误& + e1.getMessage());
String fullPath =
String fileName =
String fullName=
String type=&&;
for (FileItem fileItem : fileItems) {
// 判断该表单项是否是普通类型
if (fileItem.isFormField()) {
String name = fileItem.getFieldName();// 控件名
String value = fileItem.getString(); //控件值
if (name.equals(&descption&)) {
if(value.equals(&1&)){
type=&guide&;//办事指南
else if(value.equals(&2&)){
type=&case&;//典型案例
realpath=basePath+
File tmpDir = new File(realpath);// 初始化上传文件的临时存放目录
if (!tmpDir.exists()) {
tmpDir.mkdirs();
dff.setRepository(tmpDir);// 指定上传文件的临时目录
String filePath = fileItem.getName();
if (filePath == null || filePath.trim().length() == 0)
fullName = filePath.substring(filePath.lastIndexOf(File.separator) + 1);
fileName = filePath.substring(0,filePath.lastIndexOf(&.&));
String extName = filePath.substring(filePath.lastIndexOf(&.&) + 1);
fullPath = realpath + File.separator + fullN
if (allowFileSuffix.indexOf(extName) != -1) {
fileItem.write(new File(fullPath));
//上传文件地址存入数据库
Guide guide = new Guide();
guide.setName(fileName);
guide.setUrl(&../&+type +&/& + fullName);
if(type.equals(&guide&)){
guide.setType(1);
else if(type.equals(&case&)){
guide.setType(2);
guideServiceImpl.insert(guide);
} catch (Exception e) {
logger.error(&文件写入Guide表出错&);
throw new FileUploadException(&文件格式不正确&);bootstrap-fileinput初体验 - u的专栏 - CSDN博客
bootstrap-fileinput初体验
Document & Demo:&
bootstrap-fileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果，可同时选择多个文件。
该插件使用bootstrap CSS3样式来制作文件上传界面，美观大方。并且它提供了多国语言，你可以选择使用中文。
该文件上传插件比普通的文件上传插件功能更强大，它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外，它还可以基于AJAX上传文件，拖拽上传文件，查看上传进度，可以选择性的预览，添加或删除文件。
引入文件：
1 &link href=&/bootstrap/3.3.4/css/bootstrap.min.css& rel=&stylesheet&&
2 &link href=&/css/fileinput.min.css& media=&all& rel=&stylesheet& type=&text/css& /&
3 &script src=&jquery/2.1.1/jquery.min.js&&&/script&
4 &script src=&path/to/js/fileinput.min.js&&&/script&
5 &!-- bootstrap.js below is only needed if you wish to the feature of viewing details
of text file preview via modal dialog --&
7 &script src=&bootstrap/3.3.4/js/bootstrap.min.js& type=&text/javascript&&&/script&
8 &!-- optionally if you need translation for your language then include
locale file as mentioned below --&
10 &script src=&path/to/js/fileinput_locale_zh.js&&&/script&
1 &form enctype=&multipart/form-data& method=&POST&&
&div class=&form-group&&
&input id=&file-1& type=&file& multiple class=&file& name=&userfile& data-overwrite-initial=&false& data-min-file-count=&2&&
1 &script type=&text/javascript&&
$(&#file-1&).fileinput({
uploadUrl: 'fileupload', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg','png'],
overwriteInitial: false,
maxFileSize: 6000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
13 &/script&
参数配置：
showCaption：是否显示文件的标题。默认值true。showPreview：是否显示文件的预览图。默认值true。showRemove：是否显示删除/清空按钮。默认值true。showUpload：是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。showCancel：是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。captionClass：在标题容器上额外的class。类型string。previewClass：在预览区域容器上的额外的class。类型string。mainClass：添加在文件上传主容器。类型string。initialDelimiter：在initialPreview属性中用于上传多个文件时的分隔符。默认值：'*$$*'。initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。
其中的一个demo效果展示：
相关文章推荐django 通过bootstrap fileinput 上传图片_心得技巧_动态网站制作指南
django 通过bootstrap fileinput 上传图片
来源：人气：598
django 通过bootstrap fileinput 上传图片
实现在django框架下，通过bootstrap前端框架的fileinput控件上传图片
django 1.10.3
1.在app目录下创建图片文件夹
我的项目名称为myoject，我的app名称为myapp，创建的图片存放文件名称为uploadfiles
目录结构如下：
|–myproject
–|–myapp
—–|–urls.py
—–|–uploadfiles
—–|–settings
——–|–dev.py
[配置文件]
2.配置文件
在配置文件dev.py中，新增如下代码：
PROJECT_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), os.path.pardir))
# 放置上传的图片
UPLOADFILES = os.path.join(PROJECT_DIR, 'uploadfiles')
3.具体实现
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import time
from PIL import ImageFile
from myproject.settings import dev
from django.http import JsonResponse, HttpResponse
def _upload(file, path):
图片上传函数
_n = "%d" % (time.time() * 1000)
_f = time.strftime("%Y%m%d", time.localtime())
file_name = _f + _n+".jpg"
path_file = os.path.join(path, file_name)
parser = ImageFile.Parser()
for chunk in file.chunks():
parser.feed(chunk)
img = parser.close()
if img.mode != "RGB":
img = img.convert("RGB")
img.save(path_file, 'jpeg', quality=100)
return None
return file_name
return None
def uploadify_scrt(request):
通过bootstrap fileinput 上传图片
result = {"data": []}
path = os.path.join(dev.UPLOADFILES)
response = HttpResponse()
response['Content-Type'] = "text/script"
file = request.FILES.get("file_data", None)
imgurl = _upload(file, path)
if not imgurl:
result["imgurl"] = imgurl
result.update(code_msg(ret))
return JsonResponse(result)
except Exception:
return JsonResponse(result)
4.配置路由
在urls.py文件中增：
from django.conf.urls.static import static
from ktv_project.common import uploadimg
from ktv_project.settings.dev import UPLOADFILES
urlpatterns += [
url(r'^uploadfiles$', uploadimg.uploadify_script),
urlpatterns += static('/uploadfiles/', document_root=UPLOADFILES)
优质网站模板bootstrap fileinput 上传失败，求助_百度知道
bootstrap fileinput 上传失败，求助
我有更好的答案
rest/import&#47:&importExcel&,/&#47最近因为项目需要研究了下bootstrapfileinput的使用，来记录下这几天的使用心得吧。前台html页面的代码参数2参数3参数4js进行插件的初始化和一些参数的设置$(&#excelFile&).fileinput({uploadUrl
1条折叠回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
贴出我的代码，由于我的代码是写在thinkcmf框架中的，一些引用的js和css就看不到了，不过我能确保引用不会出错，上传图片的路径我也能保证不会出错，因为我的路径是拷贝thinkcmf前台上传头像的路径，一般也错不了，可是我点了上传按钮后，就提示“You must select at least 2 files to upload. Please retry your upload!”，哪位大神用过这个的，帮我看看，谢谢！&admintpl file="header" /&&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&/head&
&div class="container kv-main"&
&form enctype="multipart/form-data"&
&div class="form-group"&
&input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2"&
{:U("__URL__",array())}
&/body&&/html&&script&
$("#file-1").fileinput({
uploadUrl:
'__UPLOAD__partner/img', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
请输入代码
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
data-min-file-count="1"设置成data-min-file-count="0"
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。}