layui上传图片到服务器的非项目目录下的方法


Posted in Javascript onSeptember 26, 2019

1、layui没办法与form表单中的其他字段一同提交到后台,所以只能通过先提交图片,然后通过返回的图片的值来提交到数据库

2、先将所需要的jar包导入,我是用的maven所以,需要在父pom.xml文件中添加下面两个jar包(版本自己选择)

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.1</version>
</dependency>
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.4</version>
</dependency>

3、然后编写前台页面

如果只需要上传一张图片可以看上传logo的步骤,多张的话可以看上传图片的步骤

<div>
  <label class="layui-form-label">logo</label>
  <div class="layui-input-block">
    <button type="button" class="layui-btn" id="uploadLogo">
      <i class="layui-icon"></i>选择logo
    </button>
    <div class="layui-upload-list">
      <!-- 为了回显 -->
      <img class="layui-upload-img" id="upload-logo" width="150px" src="${educationalType.edLogo}">
    </div>
    <button type="button" class="layui-btn" id="submit_logo">开始上传
    </button>
    <input id="logoText" name="edLogo" type="hidden" />
  </div>
</div>
<div>
  <label class="layui-form-label">图片</label>
  <div class="layui-input-block">
    <button type="button" class="layui-btn" id="uploadImage">
      <i class="layui-icon"></i>选择图片
    </button>
    <div class="layui-upload-list" id="imageView">
      <c:if test="${pageFlag == 'updatePage' and educationalType.edImage1 != null}">
        <img class="layui-upload-img" id="upload-image1" width="150px" src="${educationalType.edImage1}" >
      </c:if>
      <c:if test="${pageFlag == 'updatePage' and educationalType.edImage2 != null}">
        <img class="layui-upload-img" id="upload-image2" width="150px" src="${educationalType.edImage2}">
      </c:if>
    </div>
    <button type="button" class="layui-btn" id="submit_image">开始上传</button>
    <input id="imageText" name="edImage" type="hidden" />
  </div>
</div>

上图中input和img的目的是为了可以接收返回值,从而在提交时可以将图片信息上传到后台

<script type="text/javascript">

  //上传logo
  layui.use('upload', function(){
    var $ = layui.jquery,
    upload = layui.upload;

    //选完文件后不自动上传
    upload.render({
      elem: '#uploadLogo',
      url: '${ctx}/upload/uploadLogoToServer.do',
      auto: false,
      //multiple: true,
      choose: function(obj){
        console.log(obj)
        //预读本地文件示例,不支持ie8
        obj.preview(function(index, file, result){
          $('#upload-logo').attr('src', result); //图片链接(base64)
          $("#img_url").attr('value',result);
        });
      },
      bindAction: '#submit_logo',
      done: function(res){
        $("#logoText").attr('value',res.url);
        console.log(res)
        return layer.msg(res.msg,{icon: res.status,time: 2000});
      }
    });

  //上传图片
    var fileCount = 0;//控制文件数量
    var maxFileCount = 2;//文件上传最大数量,如果没有限制上传文件的数量则不需要
    var maxFileSize = 20;//文件上传最大大小
    var resultValue = 0;
    var url = "";
    upload.render({
      elem: '#uploadImage',
      url: '${ctx}/upload/uploadImageToServer.do',
      auto: false,
      //multiple: true,
      choose: function(obj){
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //layer.load();
        console.log(obj)
        //预读本地文件示例,不支持ie8
        obj.preview(function(index, file, result){
          fileCount++;
          if(fileCount>maxFileCount){
            fileCount = maxFileCount;
            layer.msg('文件数量不得超过'+maxFileCount+'个',{icon:2});
            return;
          }
          //在当前ID为“imageView”的区域显示图片
          $('#imageView').append('<img name = "edImage" ' +
            'style="width: 150px; margin-left: 8px;" ' +
            'src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
        });
      },
      bindAction: '#submit_image',
      done: function(res){
        if(resultValue < 2){
          url = url + res.url + ",";
        }
        if(resultValue == 1){
          $("#imageText").attr('value',url);
        }
        resultValue++;
        console.log(res)
        return layer.msg(res.msg,{icon: res.status,time: 2000});
      }
    });
  });
</script>

4、因为layui在上传多张图片的时候是通过多次请求传递过去,所以是数据是一条一条的接收的,如果你需要回显,那么就需要在后台进行拼接,不拼接很可能会出现只传返回一张图片的信息

UploadCollect

@RequestMapping(value = "/uploadImageToServer.do")
@ResponseBody
public ResultMsg insertImageToEducational(@RequestParam(value = "file")MultipartFile[] files) throws Exception {
  ResultMsg msg = new ResultMsg();
  String url = "";
  for (int i=0,length = files.length; i < length; i++) {
    if(files[i] != null && !files[i].isEmpty()) {
      //获取路径,路径我写的是固定路径,直接映射到服务器根目录下的/usr/Images/logo
      String upload_path = IMAGE_ROOT_URL;
      String upload_fileName = FileUpload.uploadFile(files[i], upload_path);
      msg.setStatus(0);
      url = url + upload_fileName;
    }else {
      msg.setStatus(1);
      msg.setMsg("上传失败");
      msg.setUrl("给一个失败的图片路径");
      return msg;
    }
  }
  msg.setStatus(1);
  msg.setMsg("上传成功");
  msg.setUrl(url);
  return msg;

}

FileUpload

public static String uploadFile(MultipartFile multipartFile, String path) throws Exception {
  File file = new File(path);
  if (!file.exists()) {
    file.mkdirs();
  }
  FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
  String fileName = UUID.randomUUID() + multipartFile.getOriginalFilename();
  BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(path + File.separator + fileName));
  byte[] bs = new byte[1024];
  int len;
  while ((len = fileInputStream.read(bs)) != -1) {
    bos.write(bs, 0, len);
  }
  bos.flush();
  bos.close();
  return fileName;
}

5、这就是图片上传的步骤

以上这篇layui上传图片到服务器的非项目目录下的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python探索之修改Python搜索路径
2017/10/25 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python实现维吉尼亚加密法
2019/03/20 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
高中生学习的自我评价
2013/12/14 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
ktv筹备计划书
2014/05/03 职场文书
法学院毕业生求职信
2014/06/25 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
十八大观后感
2015/06/12 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL