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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中下划线的使用方法
2015/03/27 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Django实现文件上传下载
2019/10/06 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
餐饮商业计划书范文
2014/04/29 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技