Spring mvc 集成 plupload 上傳圖片

plupload

gObjectName = ''
gObjectNames = new Array() //多圖片上傳保持
currentUrl = window.location.href;
baseBackend = window.location.protocol + "//" +window.location.host;
uploadUrl = 'http://127.0.0.1:8082/';

$(document).ready(function() {
    //上傳
    $('.media-picker').each(function() {
        var el = $(this);
        var elbtn = el.find('.media-picker-button');
        var multiSelection = false;
        // 上傳目錄
        var inputField = el.find('input[type=hidden]');
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        console.log(header)

        // 類型
        var mediaType = elbtn.attr('data-type');
        var mimeTypes = [
            { title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
            { title: "Video files", extensions: "mp4,3gp" },
            { title: "Video files", extensions: "pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar" }
        ];
        if(mediaType == 'video') {
            mimeTypes = [
                { title: "Video files", extensions: "mp4,3gp" }
            ];
        } else if(mediaType == 'file') {
            mimeTypes = [
                { title: "Video files", extensions: "pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar" }
            ];
        } else if(mediaType == 'image') {
            mimeTypes = [
                { title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" }
            ];
        }

        // 是否多文件上傳
        if (elbtn.attr('data-multiple') == 'multiple') {
            multiSelection = true;
            // 如果已經有文件
            var oldFiles = inputField.val();
            if (oldFiles != '') {
                var oldFilesArr = $.parseJSON(oldFiles);
                for (var x = 0; x < oldFilesArr.length; x++) {
                    gObjectNames.push(oldFilesArr[x]);
                }
            }
        }

        var updir = elbtn.attr('data-oss-path');
        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: elbtn.attr('data-id') + '_uploader',
            url: 'http://127.0.0.1:8082/backend/upload',
            file_data_name: 'file',
            multi_selection: multiSelection,
            auto_start: true,
            flash_swf_url: '../plugins/plupload/js/Moxie.swf',
            silverlight_xap_url: '../plugins/plupload/js/Moxie.xap',

            //只允許上傳圖片和zip,rar文件

            filters: {
                mime_types: mimeTypes,
                max_file_size: '50mb', //最大隻能上傳10mb的文件
                prevent_duplicates: false //不允許選取重複文件
            },

            init: {
                PostInit: function() {
                    gObjectNames = new Array() //多圖片上傳保持
                },
                FilesAdded: function(up) {
                    uploader.setOption("multipart_params", {"updir": updir, "_csrf": token});
                    up.start(); //選擇完後直接上傳
                },

                FileUploaded: function(up, file, info) {
                    if (info.status == 200) {
                        var fileType = file.type;
                        var isImage = fileType.indexOf('image');
                        var isVideo = fileType.indexOf('video');
                        var isApplication = fileType.indexOf('application');

                        // 獲取返回德數據
                        var fileInfos = $.parseJSON(info.response);
                        if(fileInfos.error == 0) {
                            var fileUrl = fileInfos.url;
                            if (multiSelection) {
                                // 多文件轉爲json
                                gObjectNames.push(fileUrl);
                                inputField.val(JSON.stringify(gObjectNames));

                                var imageHtml = '';
                                for (var i = 0; i < gObjectNames.length; i++) {
                                    if (isImage > -1) {
                                        imageHtml += '<li class="image-info"><div class="info"><img src="' +  gObjectNames[i] + '"/><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';
                                    }
                                    if (isVideo > -1) {
                                        imageHtml += '<li class="video-info"><div class="info"><video controls src="' +  gObjectNames[i] + '"></video><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';
                                    }
                                    if (isApplication > -1) {
                                        imageHtml += '<li class="file-info"><div class="info"><div class="attachment-file">' +  gObjectNames[i] + '</div><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';
                                    }
                                }
                                el.find('.media-list ul').html(imageHtml);

                            } else {
                                // 單文件直接用名稱，
                                inputField.val(fileUrl);
                                gObjectName = fileUrl
                                    // 把圖片顯示出來
                                var imageHtml = '';
                                if (isImage > -1) {
                                    imageHtml = '<li class="image-info"><div class="info"><img src="' +  gObjectName + '"/><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';
                                }
                                if (isVideo > -1) {
                                    imageHtml = '<li class="video-info"><div class="info"><video controls src="' +  gObjectName + '"></video><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';
                                }
                                if (isApplication > -1) {
                                    imageHtml += '<li class="file-info"><div class="info"><div class="attachment-file">' +  gObjectName + '</div><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';
                                }
                                el.find('.media-list ul').html(imageHtml);
                            }
                        } else {
                            alert(fileInfos.msg);
                        }
                    } else {
                        alert(info.response);
                    }
                },

                Error: function(up, err) {
                    if (err.code == -600) {
                        alert("\n選擇的文件太大了,可以根據應用情況，在upload.js 設置一下上傳的最大大小");
                    } else if (err.code == -601) {
                        alert("\n選擇的文件後綴不對,可以根據應用情況，在upload.js進行設置可允許的上傳文件類型");
                    } else if (err.code == -602) {
                        alert("\n這個文件已經上傳過一遍了");
                    } else {
                        alert("\nError xml:" + err.response);
                    }
                }
            }
        })
        uploader.init();
    })

    // 刪除
    $('.media-picker').each(function() {
        var el = $(this)
        var inputField = el.find('input[type=hidden]');
        var fileUrl = inputField.val();
        var elbtn = el.find('.media-picker-button');
        var multiSelection = false;
        // 是否多文件上傳
        if (elbtn.attr('data-multiple') == 'multiple') {
            multiSelection = true;
        }
        if (multiSelection) {
            el.on('click', '.delete-image', function() {
                var elDel = $(this);
                // 得到filename
                var currentFileName = elDel.prev('p').html();

                // 刪除當前的父級li
                elDel.parent().parent().remove();
                // 重新賦值數組
                // 去掉url數組中的當前url
                for(var i in gObjectNames) {
                    if(gObjectNames[i] == currentFileName) {
                        gObjectNames.splice(i,1);
                       break;
                    }
                }
                // 後端不做刪除
                /*$.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                });
                $.ajax({
                    type: "POST",
                    url: baseBackend + "uploader/deluploader",
                    data: "attachement_id=" + currentAttachementId,
                    success: function(msg) {

                    }
                });*/
                inputField.val(JSON.stringify(gObjectNames));
            })
        } else {
            el.on('click', '.delete-image', function() {
                // 顯示值爲空
                el.find('.media-list ul').html('');
                inputField.val('');

                // oss刪除
                if (gObjectName != '') {
                    fileAttachement = gObjectName;
                }
                 // 後端不做刪除
                /*$.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                });
                $.ajax({
                    type: "POST",
                    url: baseBackend + "uploader/deluploader",
                    data: "attachement_id=" + fileAttachement,
                    success: function(msg) {

                    }
                });*/
            })
        }

    })
})

 

上傳注意時需要注意加入csrf

 

後端

@Controller
@RequestMapping(value = "/backend")
public class UploadController {

    @PostMapping(value = "/upload", produces = "application/json;charset=UTF-8")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request)
    {
        Map<String, String> jres = new HashMap<String, String>();
        Gson gson = new Gson();

        if(!file.isEmpty()) {
            // 文件夾路徑
            // 這裏正是環境要處理，spring boot每次重啓都會重新生成臨時目錄
            String uploadPath = request.getSession().getServletContext().getRealPath("upload/");
            String currentDatePath = ToolUtils.makeDatePath();
            String savePath = uploadPath.concat("/").concat(currentDatePath);
            // 獲取文件名
            String fileName = file.getOriginalFilename();
            String newFileName = ToolUtils.makeFileName(fileName);

            String showUrl = "/upload/".concat(currentDatePath).concat("/").concat(newFileName);
            File saveFile = new File(savePath, newFileName);
            if (!saveFile.exists()) {
                saveFile.mkdirs();
            }

            try {
                file.transferTo(saveFile);
                jres.put("error", "0");
                jres.put("url", showUrl);
                gson.toJson(jres);
            } catch (Exception e) {
                jres.put("error", "1");
                jres.put("msg", "wrong");
            }
            return gson.toJson(jres);
        }
        jres.put("error", "1");
        jres.put("msg", "wrong");
        return gson.toJson(jres);
    }
}