使用layui上傳圖檔前後端代碼

一、form表單裡的代碼

<div class="layui-form-item">
	    <label class="layui-form-label">公司Logo</label>
	    <div class="layui-input-inline uploadHeadImage">
	        <div class="layui-upload-drag" id="headImg">
	            <i class="layui-icon"></i>
	            <p>點選上傳圖檔，或将圖檔拖拽到此處</p>
	        </div>
	    </div>
	      <!--   隐藏的圖檔路徑 -->
	    <input type="text" name="companyImg" id="companyImg" lay-verify="title" class="layui-input layui-hide">
	          
	    <div class="layui-input-inline">
	        <div class="layui-upload-list">
	            <img class="layui-upload-img headImage"  src="http://t.cn/RCzsdCq" id="demo" style="height:130px;width:130px;">
	            <p id="demoText"></p>
	        </div>
	    </div>
</div>
           

二、js中layui送出的圖檔的代碼

layui.use(['form','laydate',"upload","jquery","layer", "element"], function(){
	var $ = layui.$,
    element = layui.element,
    layer = layui.layer,
    upload = layui.upload,
    form = layui.form,
	laydate = layui.laydate;
	laydate.render({ //建立時間
        elem: '#date'
        });
	//單圖檔上傳（公司logo）
    var uploadInst = upload.render({
        elem: '#headImg'
        , url: '${pageContext.request.contextPath }/upload/headImg'
        , size: 500
        , before: function (obj) {
            //預讀本地檔案示例，不支援ie8
            obj.preview(function (index, file, result) {
                $('#demo').attr('src', result); //圖檔連結（base64）
                var demoText = $('#demoText');
                demoText.html('<span style="color: #8f8f8f;">預覽圖檔!!!</span>');
            });
        }
        , done: function (res) {
            //如果上傳失敗
            if (res.code > 0) {
                return layer.msg('上傳失敗');
            }
            //上傳成功
            //列印背景傳回的位址: 把位址放入一個隐藏的input中, 和表單一起送出到背景, 此處略..
             console.log(res.data.src);
             $("#companyImg").val(res.data.src);
            
            window.parent.uploadHeadImage(res.data.src);
            var demoText = $('#demoText');
            demoText.html('<span style="color: #8f8f8f;">上傳成功!!!</span>');
        }
        , error: function () {
            //示範失敗狀态，并實作重傳
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload" id="headImg">重試</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
  });
           

三、資料傳輸到背景代碼為

package com.controller;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;
import java.util.HashMap;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FilenameUtils;
import org.apache.commons.lang3.RandomUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;


import com.sun.javafx.collections.MappingChange.Map;
import com.tools.DateUtil;

@Controller
@RequestMapping("/upload")
public class uplond {

	
	/**
	 * 個人資訊上傳
	 * @return {Result}
	 */
	@RequestMapping(value = "/headImg", method = {RequestMethod.POST})
	@ResponseBody
	public Object headImg(@RequestParam(value="file",required=false) MultipartFile attach, HttpServletRequest request, HttpServletResponse response) throws Exception {
		String carPictuerUrl = null;
		//判斷檔案是否為空
		if(!attach.isEmpty()){
			
			  String path1 =
			  request.getSession().getServletContext().getRealPath("/");
			 
			String path = request.getSession().getServletContext().getRealPath("statics/uploadfiles");
					 
			
			System.out.println("path1:==============="+path1);
			
			System.out.println("path======"+path);
			String oldFileName = attach.getOriginalFilename();//原檔案名
			String prefix=FilenameUtils.getExtension(oldFileName);//原檔案字尾
			/**
			 * RandomUtils.nextInt(1, 1000000)
	         * 傳回一個在指定區間内的整數
	         * startInclusive 可以傳回的最小值必須是非負的
	         * endExclusive 上限（不包括）
	         */
			//String fileName = System.currentTimeMillis()+RandomUtils.nextInt(1000000)+"."+prefix;  	
			String fileName = System.currentTimeMillis()+RandomUtils.nextInt(1,1000000)+"."+prefix;
			File targetFile = new File(path, fileName);  //建立檔案
			 if(!targetFile.exists()){  //判斷檔案夾是否存在
                 targetFile.mkdirs();  
             }  
			
				try {
					attach.transferTo(targetFile);
				} catch (IllegalStateException e) {
					e.printStackTrace();
				} catch (IOException e) {
					e.printStackTrace();
				}
		
			 
				carPictuerUrl = "statics/uploadfiles/"+fileName;
		}
	
	    HashMap<String,Object> map2=new HashMap<String,Object>();
	    HashMap<String,Object> map=new HashMap<String,Object>();
	    map.put("code",0);
	    map.put("msg","");
	    map.put("data",map2);
	    map2.put("src",carPictuerUrl);
	    return map;
	}
	
	
	
}

           

四、感謝你的浏覽通路

工作幾年，略有心得，然很少整理成文，平常工作中浏覽了不少道友的好文章，受益良多。 
  顧也開始寫一些文章， 希望能與各位道友分享進步 ！！！！
  如果有用，歡迎各位點贊評論，若有不足，亦可指正！！！