fileinput 时间_Bootstrap的fileinput插件实现多文件上传的方法
*1.bootstrap-fileinput 插件git下载地址
2.解决使用bootstrap-fileinput得到返回值
上传图片
$("#file-0a").fileinput({
uploadUrl : "/upload_img",//上传图片的url
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
overwriteInitial : false,
maxFileSize : 1000,//上传文件最大的尺寸
maxFilesNum : 1,//上传最大的文件数量
initialCaption: "请上传商家logo",//文本框初始话value
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback : function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
注意上传图片事件完之后,得到返回值写法
$('#file-0a').on('fileuploaded', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log(response);//打印出返回的json
console.log(response.paths);//打印出路径
});
jsp页面
data-min-file-count="1" name="upload_logo">
其中data-min-file-count=”1”是指文件上传最低数量
3.服务端代码
采用了spring自带插件上传,框架为Springmvc
Bean
import java.util.List;
public class Picture {
private List paths;
public List getPaths()
{
return paths;
}
public void setPaths(List paths)
{
this.paths = paths;
}
}
Controller
@ResponseBody
@RequestMapping(value="upload_img",method=RequestMethod.POST)
public Picture uploadImage(@RequestParam MultipartFile[] upload_logo) throws IOException{
log.info("上传图片");
Picture pic = new Picture();
List paths = new ArrayList();
String dir = UploadUtil.getFolder();
for(MultipartFile myfile : upload_logo){
if(myfile.isEmpty()){
log.info("文件未上传");
}else{
log.info("文件长度: " + myfile.getSize());
log.info("文件类型: " + myfile.getContentType());
log.info("文件名称: " + myfile.getName());
log.info("文件原名: " + myfile.getOriginalFilename());
log.info("========================================");
//上传文件 返回路径
String path = UploadUtil.writeFile(myfile.getOriginalFilename(), dir, myfile.getInputStream());
log.info("文件路径:"+path);
paths.add(path);
}
}
pic.setPaths(paths);
return pic;
}
uploadUtil
private static final Logger log = LoggerFactory.getLogger(UploadUtil.class);
private UploadUtil() {
}
private static SimpleDateFormat fullSdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
private static SimpleDateFormat folder = new SimpleDateFormat(
"yyyy" + File.separator + "MM" + File.separator + "dd");
/**
* 返回yyyy File.separator MM File.separator dd格式的字符串
*
* @return
*/
public static String getFolder() {
return folder.format(new Date());
}
/**
* 文件上传
*
* @param srcName
* 原文件名
* @param dirName
* 目录名
* @param input
* 要保存的输入流
* @return 返回要保存到数据库中的路径
*/
public static String writeFile(String srcName, String dirName, InputStream input) throws IOException {
log.info(srcName);
// 取出上传的目录,此目录是tomcat的server.xml中配置的虚拟目录
String uploadDir = ContextUtil.getSysProp("upload_dir");//设置你上传路径
// 取出虚拟目录的访问路径
String virtualDir = ContextUtil.getSysProp("virtual_dir");//设置你虚拟目录访问路径
// 重命名文件
if (null != srcName) {
srcName = srcName.substring(srcName.indexOf("."));
} else {
srcName = ".jpg";
}
String filename = "";
// 得到要上传的文件路径
filename = uploadDir + File.separator + dirName + File.separator + fullSdf.format(new Date()) + srcName;
// 得到将要保存到数据中的路径
String savePath = filename.replace(uploadDir, "");
savePath = virtualDir + savePath.replace("\\", "/");
File file = new File(filename);
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
FileOutputStream fos = new FileOutputStream(file);
// 一次30kb
byte[] readBuff = new byte[1024 * 30];
int count = -1;
while ((count = input.read(readBuff, 0, readBuff.length)) != -1) {
fos.write(readBuff, 0, count);
}
fos.flush();
fos.close();
input.close();
return savePath;
}
4.解决上传时候遇到的一些问题
如遇见点击上传之后,进度条显示为100%,jsp页面显示[Object,obejct],那么注意你后台返回的是否为json对象。
以上所述是小编给大家介绍的Bootstrap的fileinput插件实现多文件上传的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
fileinput 时间_Bootstrap的fileinput插件实现多文件上传的方法相关推荐
- java ajax多文件上传插件_ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): //修改前代码------- //var oldElement = jQuery(' ...
- ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement ...
- SSM框架使用Layui文件上传插件实现多文件上传(多文件列表)
SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置 想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <!--co ...
- jquery文件上传插件 uploadify java_jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数 定制功能,如文件大小. ...
- ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
- 利用插件修改wordpress文件上传限制
wordpress修改文件上传限制,亲测有效 最近在个人网站写博客发现,上传文件限制只有50M 在网上查看了很多方法(修改php.ini/.htaccess),试了试对我的网站没啥用 于是在插件sho ...
- 导入php插件_漏洞分析丨WordPress评论插件wpDiscuz任意文件上传
本文共 791 字,预计阅读时间 4 分钟 首发于 『先知社区』 在T00ls上看到一个老哥WordPress站点被搞了,下载了Access日志分析了一下,发现攻击路径是先访问了一个页面,然后访问 / ...
- php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
- java 批量上传图片插件_java多文件上传plupload控件实现多图片上传(一)
使用的是plupload-2.1.2 控件.网上资源挺多的,很好下载. plupload 官方地址 : http://www.plupload.com/ plupload 示例: http://www ...
最新文章
- B站项目资源过于敏感,2h后删,抓紧保存!!!
- vb链接远程mysql数据库代码_vb链接远程mysql数据库代码
- C C++中关于全局变量静态变量,extern,static,const的区别与总结
- 三年级计算机画图,三年级面积作图题_小学三年级要求画图
- java xfire webservice 异步_[Java教程]Java中使用webservice,简化开发(xfire的webservice)...
- CSS word-wrap强制换行截断长字符串
- 将DataRow转换为DataTable
- 智能家居系统--选配防盗锁新(转载)
- php100视频解压密码
- Rds mysql 内存配置_RDS MySQL内存管理
- 密码学技术背后的计算困难性理论
- 明港镇计算机培训班,平桥区建筑工匠培训班在明港新集村开班
- SLAM【十一】建图
- Excel图表美化及样式设置教程
- 加速你的安卓模拟器,让开发更迅速
- 2018第5周价值信息总汇
- C++的get()函数与getline()函数使用详解
- 王者荣耀虚拟服务器设置方法,《王者荣耀》操作设置详解
- Python多进程读图提取特征存npy
- 如何停止屏幕保护程序?
热门文章
- Qt翻金币小游戏详细教程(内涵所有源码、图片资源)
- 下列设备中 微型计算机系统必须具备的是,大学计算机基础全部习题与答案解析...
- [NOIP2011普及组] 统计单词数
- IntelliJ IDEA 构建maven多模块工程项目
- Android gradle implementation与api的区别及引用传递
- c语言strdup,C语言中的strdup()函数和其与strcpy()函数的区别
- MyBatis Plus分页插件常用配置
- UVALive 6277 - Addictive Bubbles (模拟)
- 五步移相法matlab程序_四步移相法提取相位(相位解包裹)基础问题
- ulimit命令的使用