快捷導(dǎo)航

layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法

更新時(shí)間：2019年09月26日 17:01:53 作者：MrLi_IT

今天小編就為大家分享一篇layui上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、layui沒(méi)辦法與form表單中的其他字段一同提交到后臺(tái)，所以只能通過(guò)先提交圖片，然后通過(guò)返回的圖片的值來(lái)提交到數(shù)據(jù)庫(kù)

2、先將所需要的jar包導(dǎo)入，我是用的maven所以，需要在父pom.xml文件中添加下面兩個(gè)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、然后編寫(xiě)前臺(tái)頁(yè)面

如果只需要上傳一張圖片可以看上傳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">&#xe67c;</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">開(kāi)始上傳
    </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">&#xe67c;</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">開(kāi)始上傳</button>
    <input id="imageText" name="edImage" type="hidden" />
  </div>
</div>

上圖中input和img的目的是為了可以接收返回值，從而在提交時(shí)可以將圖片信息上傳到后臺(tái)

<script type="text/javascript">

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

    //選完文件后不自動(dòng)上傳
    upload.render({
      elem: '#uploadLogo',
      url: '${ctx}/upload/uploadLogoToServer.do',
      auto: false,
      //multiple: true,
      choose: function(obj){
        console.log(obj)
        //預(yù)讀本地文件示例，不支持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;//控制文件數(shù)量
    var maxFileCount = 2;//文件上傳最大數(shù)量，如果沒(méi)有限制上傳文件的數(shù)量則不需要
    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(); //將每次選擇的文件追加到文件隊(duì)列
        //layer.load();
        console.log(obj)
        //預(yù)讀本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          fileCount++;
          if(fileCount>maxFileCount){
            fileCount = maxFileCount;
            layer.msg('文件數(shù)量不得超過(guò)'+maxFileCount+'個(gè)',{icon:2});
            return;
          }
          //在當(dāng)前ID為“imageView”的區(qū)域顯示圖片
          $('#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、因?yàn)閘ayui在上傳多張圖片的時(shí)候是通過(guò)多次請(qǐng)求傳遞過(guò)去，所以是數(shù)據(jù)是一條一條的接收的，如果你需要回顯，那么就需要在后臺(tái)進(jìn)行拼接，不拼接很可能會(huì)出現(xiàn)只傳返回一張圖片的信息

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()) {
      //獲取路徑，路徑我寫(xiě)的是固定路徑，直接映射到服務(wù)器根目錄下的/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("給一個(gè)失敗的圖片路徑");
      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上傳圖片到服務(wù)器的非項(xiàng)目目錄下的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: