今天在使用layui的过程中,遇到了使用其上传文件的模块。自己感觉文件上传还是bootstrapfileinput插件比较好用一些,灵活方便,bootstrapfileinput使用方法参考:http://www.cnblogs.com/qlqwjy/p/8410413.html

  在使用layui的文件上传模块的时候想要携带额外的参数,在这里鼓捣了半天。。。真的是坑。在这里还是总结一下layui文件上传模块的使用方法。

1.页面准备文件上传的模态框:

<!--相关的几个模态框-->
<!--1 S 上传图片的模态框-->
<%--隐藏打开的index--%>
<input type="hidden" id="hidden_picture_index">
<div class="x-body" style="display: none" id="pictureModal">
<div class="layui-upload">
<!--隐藏培养方案编号-->
<input type="hidden" id="hidden_trainSchemeId">
<!--隐藏上传文件的操作-->
<input type="hidden" id="hidden_tmp_index">
<button type="button" class="layui-btn" id="structurePicture"><!--动态赋值--></button>
<!--预留一个预览的img标签-->
<div id="imgDiv" style="display: none;margin-top: 10px;">
<img id="imgPreview" width="400px" height="200px">
</div>
<div id="promptDiv" style="margin-top: 10px;display: none">
<p><font style="font-size: 30px">您还没有上传课程关系结构图,请先上传课程关系结构图!</font></p>
</div>
</div>
</div>
<!--1 E 上传图片的模态框-->

2.上传文件的JS

layui.use(['upload','layer'],function () {
var upload = layui.upload,layer = layui.layer;
//普通图片上传
var uploadInst = upload.render({
elem: '#structurePicture',//绑定的元素
url: contextPath+'/TrainPicture/uploadTrainPicture.do',//提交的url
auto:true,//是否自动上传
accept:"images",//指定允许上传的文件类型
multiple:false,//支持多文件上传
acceptMime:"image/*",//规定打开文件选择框时,筛选出的文件类型
/* data:{
trainningschemeid: $("#hidden_trainSchemeId").val()
},//额外携带的培养方案编号*/
before: function(obj){
this.data={"trainningschemeid": $("#hidden_trainSchemeId").val()}//携带额外的数据
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#imgPreview').attr('src', result); //图片链接(base64)
});
var index = layer.load(); //开始上传之后打开load层
$("#hidden_tmp_index").val(index);//将load层的index隐藏到页面中
},
done: function(res, index, upload){ //假设code=0代表上传成功
layer.close(layer.index); //它获取的始终是最新弹出的某个层,值是由layer内部动态递增计算的
if(res.msg=="上传成功"){
//提示上传成功(关闭之后将按钮的内容变为更换图片)
layer.msg(res.msg, {icon: 1,time:2*1000},function () {
$("#structurePicture").text("更换主要课程关系结构图");//按钮标题置为上传图片
$("#promptDiv").css("display","none");//隐藏提示语
$("#imgDiv").css("display","");//显示图片框
});
} }
});
}) /*************E 上传培养方案课程结构图相关操作***************/

  data属性用于携带额外的参数,可是我带的参数总是""(空串)。后来查阅网上资料发现第二种解决办法就是在before文件上传的函数中动态设置上传的参数。例如上面的before函数。但是有的时候上面的data属性可以生效,有的时候却不生效。。。。。。所以在携带参数的时候需要参考上面两种方法看哪种生效。

注意:因为layui支持的格式默认为图片文件(JPG),在代码中添加accept:'file'。有时候不添加会警告 选择的图片中包含不支持的格式

3.接收文件的后台:(Java代码)

    @RequestMapping("/uploadTrainPicture")
public ResposeResult addTrainPicture(Trainpicture trainpicture, MultipartFile file){
//1.保存图片到本地
String fileoriname=null;//原名称
String filenowname=null;//系统生成的名称
if(file != null){
fileoriname = file.getOriginalFilename();//获取原名字
filenowname = UUIDUtil.getUUID2()+ "."+FilenameUtils.getExtension(fileoriname);//UUID生成新的唯一名字+文件扩展名
} try {
FileHandleUtil.uploadSpringMVCFile(file, "trainPicture", filenowname);
} catch (Exception e) {
logger.error("保存培养方案图片出错",e);
}
//2.调用service保存数据库
trainpicture.setPictureoriname(fileoriname);
trainpicture.setPicturenowname(filenowname);
trainpicture.setUptime(new Date());
ResposeResult resposeResult = new ResposeResult();
String result = null;
try {
result = trainPictureService.addTrainPicture(trainpicture)?"上传成功":"上传失败";
} catch (SQLException e) {
result = "上传失败";
logger.error("保存培养方案数据库出错",e);
}
resposeResult.setMsg(result);
return resposeResult;
}

  

  发现在使用bootstrapfileinput的多文件上传插件和layui的多文件上传插件的原理都是每次传一个文件,多个文件会访问多次,所以java的MultipartFile也不必用数组接收。

layui结合SpringMVC上传文件以及携带额外的参数上传文件的更多相关文章

  1. SpringMVC使用MultipartFile文件上传,多文件上传,带参数上传

    一.配置SpringMVC 二.单文件与多文件上传 三.多文件上传 四.带参数上传 一.配置SpringMVC 在spring.xml中配置: <!-- springmvc文件上传需要配置的节点 ...

  2. SpringMVC 实现POI读取Excle文件中数据导入数据库(上传)、导出数据库中数据到Excle文件中(下载)

    读取Excale表返回一个集合: package com.shiliu.game.utils; import java.io.File; import java.io.FileInputStream; ...

  3. 基于SpringMVC的文件(增删改查)上传、下载、更新、删除

    一.项目背景 摘要:最近一直在忙着项目的事,3个项目过去了,发现有一个共同的业务,那就是附件的处理,附件包括各种文档,当然还有图片等特殊文件,由于时间的关系,每次都是匆匆忙忙的搞定上线,称这项目的空档 ...

  4. linux使用curl上传文件并且同时携带其它传递参数

    一般使用linux原生态的命令curl上传文件时命令如下 假如要上传文件是myfile.txt curl -F "file_name=@myfile.txt" -X POST &q ...

  5. layui文件上传中如何先判断后再弹出文件选择框

    前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择.但是在layui的 ...

  6. SpringMVC 参数映射与文件上传

    handler参数映射: 接下来就是Spring的各个处理细节了,无论框架如何疯转其实我们处理请求的流程是不变的,设计到的操作也是固定的,举个例子,当我们要实现一个登陆功能时: 创建一个用于处理登录请 ...

  7. element-ui upload上传文件并携带参数 使用formData对象

    需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...

  8. SpringMVC入门一:基础知识(依赖、注解、文件上传/下载、拦截器、异常处理等)

    为了使Spring可插入MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而使用Spring进行WEB开发时可以选择使用Spring的SpringMVC框架作 ...

  9. SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片

    SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片   在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...

随机推荐

  1. Redis 优势以及性能问题

      1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string, ...

  2. DBGrid添加行号编写笔记

    procedure TForm1.ClientDataSet1NewRecord(DataSet: TDataSet); begin ShowMessage('你好'); ClientDataSet1 ...

  3. 过滤器将获取到的内容注入到servlet的request中

    过滤器将获取到的内容注入到servlet的request中

  4. BZOJ4561 JLOI2016圆的异或并(扫描线+平衡树)

    考虑一条扫描线从左到右扫过这些圆.观察某一时刻直线与这些圆的交点,可以发现构成一个类似括号序列的东西,括号的包含关系与圆的包含关系是相同的.并且当扫描线逐渐移动时,括号间的相对顺序不变.于是考虑用se ...

  5. DSU模板(树的启发式合并)

    摘自Codeforces博客 With dsu on tree we can answer queries of this type: How many vertices in subtree of ...

  6. 【scala】2.控制结构和函数

    简介 在Java或者C++中,我们把表达式和语句看做两种不同的东西.表达式有值,而语句执行动作. 在Scala中,几乎所有构造出来的语法结构都是有值的.这个特性使得程序更加的精简,也更易读. 1.条件 ...

  7. php高效遍历文件夹、高效读取文件

    /** * PHP高效遍历文件夹(大量文件不会卡死) * @param string $path 目录路径 * @param integer $level 目录深度 */ function fn_sc ...

  8. 最新版的Android4.4.2 SDK无法下载解决

    http://hi.baidu.com/petercao2008/item/65362d2bdbddfacba5275a50 问题: Downloading ARM EABI v7a System I ...

  9. bzoj2758【scoi2012】Blinker的的噩梦

    题目描述 一天Blinker醒来,发现自己成为了一个二维世界的点,而且被标记上了一个奇怪的值. 这个世界是由N个边界互不相交(且不相切)的图形组成,这里图形仅包括圆和凸多边形.每个图形还有一个权值.每 ...

  10. 20170520 DP阶段总结

    DP的力量不是无穷的. 但是,因为它叫做“动态规划”,它在OI界如鱼得水.这个“动态”不是指“离线”与“在线”,也不是什么“可持久化”.它只是把问题抽象为一个个“阶段”,在每一个“阶段”中作出或繁或简 ...