bootstrap fileinput上传组件和form表单一起提交

最近做到文件上传，用的是bootstrap fileinput上传组件，一般做文件上传我们有两种方式。

1：先上传文件，获取文件的回显值后赋值给form表单的字段文件属性，然后上传form表单。

2：form表单和文件一起提交。

考虑到第一种不太优雅，会提高代码的复杂性，故此选择第二种方式:form表单和文件一起提交。
过程如下

1：引入bootstrap fileinput 相关js，css

2：form表单插入file框

3：js内声明文件上传组件

$("#fileinput").fileinput({'theme': 'explorer-fas',maxFileSize: 1024000,  //最大允许上传限制//隐藏uploadUrl属性，相当于是普通文件控件，从而达到和form表单的效果// uploadUrl: prefix + "/uploadRefundFile",overwriteInitial: false,initialPreviewAsData: true,uploadAsync:true,showUpload: false,showClose: false,initialPreview: [],allowedFileExtensions: ["pdf",'jpg', 'png', 'gif','jpeg'],elCaptionText: ['只允许上传pdf/图片类型文件'],minFileCount: 1, //最少上传maxFileCount: 9, //最多上传layoutTemplates:{actionUpload:''  ,//去除上传预览缩略图中的上传图片},previewFileIconSettings: {'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',// 'doc': '<i class="fa fa-file-word-o text-primary"></i>',// 'docx': '<i class="fa fa-file-word-o text-primary"></i>',// 'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',// 'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',}
})

说明：   获取上传文件的数量  var fileLength = $('#fileinput').fileinput('getFilesCount');

4：ajax进行form表单处理

5：后端利用httpservletrequest 获取文件

整个流程下来，相比第一种方式逻辑更加简单，减少代码量。

若是对于如何通过HttpServletRequest如何获取文件信息进行上传，可以到这里下载:
解析form表单同步上传的文件信息获取文件流

bootstrap fileinput上传组件和form表单一起提交相关推荐

javascript构造可以上传文件的form表单（通过js修改enctype）
在上传文件时,我们都知道需要在form表单中加上enctype="multipart/form-data".而在开发过程中,也有可能遇到需要用javascripts构造form表单 ...
【一文学会文件上传】SpringBoot+form表单实现文件上传
唠嗑部分平时我们在项目过程中,往往会遇到这种情况,比如:我的用户应该有一个头像,那就涉及到文件上传,那么文件应该如何存储呢? 这就会有很多方式 1.最简单的就是存在服务器上,这就要考虑到服务器的磁盘 ...
bootstrap fileinput上传返回400，404，500 等错误替换
$(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...
交互组件滚动条,搜索框,上传组件,翻页的微创新
纵观交互设计发展史,就是创新的交互模式被广为接受后成为标准,旧的交互模式不断被淘汰的历史.所以交互模式发展也是一个"物竞天择,优胜劣汰"的过程.本文是09年在碳酸饮料会上做过的一次 ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
Bootstrap File Input，最好用的文件上传组件
本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示.上传,以及如何在服务器端进行文件保存. 一.先来看效果图吧二.引入插件的样式和脚本 <lin ...
fileinput 时间_JavaScript_Bootstrap Fileinput文件上传组件用法详解，最近时间空余，总结了一些关...
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到phpstudy平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的 ...
.form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
element-ui upload 上传组件附带额外参数进行上传（表单形式，多个参数）
之前一直使用upload组件单个上传文件,最近遇到需要上传表单字段,表单中有多个参数下图是接口要求: 官网上传组件中提供了响应的功能实现,但是demo中未演示,不注意看文档参数的话,可能会不知道这个 ...

bootstrap fileinput上传组件和form表单一起提交

bootstrap fileinput上传组件和form表单一起提交相关推荐

最新文章

热门文章