摘要：示例一頁面上傳附件文件對象代表附件通過對象傳輸?shù)胶笈_用于插入數(shù)據(jù)的不要去處理發(fā)送的數(shù)據(jù)不要去設置請求頭是返回的之類的值，是定義的文件名查詢上傳失敗后臺接收多文件下面新增自定義方法多個附件上傳換成也是唯一，好找圖片示例二圖片上傳單張

[TOC]

/*
上傳附件
docObj:文件對象
appid：cid
apptypeid：1、blog 2、
busitype：100——代表附件
*/
function uploadAttachment(docObj){
    var appid = $("#appid").val();
    var files =docObj.files;
    var formData = new FormData();//通過對象傳輸?shù)胶笈_
    formData.append("appid",appid);//用于sysfile插入數(shù)據(jù)的appid
    for (var i = files.length - 1; i >= 0; i--) {
        formData.append("files[]",files[i]);
    }
    $.ajax({
        data : formData,
        type : "POST",
        url : "/common/xxx/upload",
        cache : false,
        processData: false,                // jQuery不要去處理發(fā)送的數(shù)據(jù)
        contentType: false,                // jQuery不要去設置Content-Type請求頭
        dataType: "JSON",
        success: function(data) {//data是返回的hash,key之類的值，key是定義的文件名
            //查詢
            $("#attachment").bootstrapTable("refresh");
            attachment(appid);
        },
        error:function(){
            toastr.error("上傳失敗");
        }
    });
}

//下面新增自定義方法
@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("files[]") MultipartFile[] files,@RequestParam("appid") String appid) throws IOException, Exception {
    //多個附件上傳
    for (int i = 0; i < files.length; i++) {
        System.out.println(i);
        String fname = files[i].getOriginalFilename();
//                String fileName = FileUtil.renameToUUID(fname);//換成uuid——也是唯一，好找圖片
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String fileType = fname.substring(fname.lastIndexOf(".") + 1, fname.length()).toLowerCase();
        String fileName = uuid+"."+fileType;//cf6ec8ccb62e451e8d5f27dab6bfeb3f.png
        FileUtil.uploadFile(files[i].getBytes(),tuodataConfig.getUploadPublicPath()+"blog/", fileName);
        FileDO fileDo= insertFile(appid,uuid,0,fname,fileName,fileType);
    }
    return R.ok();
}

layui圖片上傳

html:

    
    

    

        輪播圖片
        

            
            選擇文件
            

                
            
        
    



js:
新增的js腳本：


編輯的js腳本：


后臺代碼：
/**
 * 輪播圖保存 
 */
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartSave() {
    String image = JMUploadKit.fileUpload(this, "file", "rotationChart");

    Configure rotationChart = new Configure();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    rotationChart.setValue2(sdf.format(new Date()));
    boolean result = false;
    if (image != null) {
        rotationChart.setName("rotationChart");
        rotationChart.setValue(image);
        result = configureDao.save(rotationChart);
    }
    if (result) {
        // 給type跟desc賦值
        Configure rotationChart1 = configureDao.get(false);
        rotationChart.setType(rotationChart1.getType() + 1);// 獲取最后一個type
        rotationChart.setDesc("輪播圖-" + (rotationChart1.getType() + 1));
        rotationChart.update();
        JMResult.success(this, "新增成功");
    } else {
        JMResult.fail(this, "新增失敗");
    } 
}
/**
 * 輪播圖更新 
 */
@Before(value = { JMSystemApiInterceptor.class })
public void rotationChartUpdate() {
    String image = JMUploadKit.fileUpload(this, "file", "rotationChart");
    Integer rotationChartId = getParaToInt("rotationChartId",null);
    Configure rotationChart = new Configure();
    
    Configure rotationChart1 = configureDao.getById(rotationChartId);
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    boolean result = false;// 標識是否報錯
    if (image != null) {
        if (rotationChart1.getValue() != null)
            ToolUpload.deleteFile(rotationChart1.getValue());
        rotationChart.setId(rotationChartId);
        rotationChart.setValue(image);
        rotationChart.setValue2(sdf.format(new Date()));// 記錄更新時間
        result = configureDao.update(rotationChart);
    }
    if (result) {
        JMResult.success(this, "修改成功");
    } else {
        JMResult.fail(this, "修改失敗");
    }
}

參考文章路徑：https://www.layui.com/demo/up...

        引導頁
        

            

                                           
                

                    
                
                                           
                

                

                     
                         選擇圖片  
                         改變  
                        
                     
                     刪除 
                
            
            

                NOTE! 兼容 IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+.以上的瀏覽器
            
        
    
后臺代碼：
String ossFileUpload = ToolUpload.OSSFileUpload(this, "image", "configure");
地址：wenbang/upload/configure/20190116/xxx.jpg
page 頁面顯示縮略圖：

    ${ctx}/assets/global/img/no.png${oss}${obj.value}" style="max-width: 26px; max-height: 22px;">