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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
jquery预加载图片的方法
May 27 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
解决vue的router组件component在import时不能使用变量问题
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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
js实现网页随机验证码
2020/10/19 Javascript
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python numpy中cumsum的用法详解
2019/10/17 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
公务员总结性个人自我评价
2013/12/05 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
党风廉正建设责任书
2015/01/29 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
观后感的写法
2015/06/19 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python