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中string 的replace
Apr 12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php blowfish加密解密算法
2016/07/02 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
PyCharm代码格式调整方法
2018/05/23 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
对python3新增的byte类型详解
2018/12/04 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
家具厂厂长岗位职责
2014/01/01 职场文书
中考标语大全
2014/06/05 职场文书
禁毒宣传标语
2014/06/19 职场文书
日语系毕业求职信
2014/07/27 职场文书
早上好问候语大全
2015/11/10 职场文书