MUI + Spring MVC 實現多圖片上傳

時間  2019-11-19
標籤 mui spring mvc 實現 圖片 上傳 欄目 Spring 简体版
原文   原文鏈接

後臺代碼，主要是SpringMVC 接收多文件上傳，不是用的MutilFiles 方式，主要是由於MUI 5+ 不支持文件上傳的Key是同一個名字css

private String saveFile(MultipartFile file, HttpServletRequest request){
	String path= "";
	try {
		byte[] bytes = file.getBytes();

		// 當前app根目錄
		String rootPath = request.getServletContext().getRealPath("/");

		// 須要上傳的相對地址（application.properties中獲取）
		String relativePath = env.getProperty("image.file.upload.dir");

		// 文件夾是否存在，不存在就建立
		File dir = new File(rootPath + File.separator + relativePath);
		if (!dir.exists())
			dir.mkdirs();
		String fileExtension = getFileExtension(file);

		// 生成UUID樣式的文件名
		String filename = java.util.UUID.randomUUID().toString() + "." + fileExtension;

		// 文件全名
		String fullFilename = dir.getAbsolutePath() + File.separator + filename;

		// 用戶頭像被訪問路徑
		String relativeFile = relativePath + filename;

		// 保存圖片
		File serverFile = new File(fullFilename);
		BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));
		stream.write(bytes);
		stream.close();
		LOGGER.info("Server File Location = " + serverFile.getAbsolutePath());

		String serverPath = new URL(request.getScheme(), request.getServerName(), request.getServerPort(),
				request.getContextPath()).toString();
		return  relativeFile;

	} catch (Exception e) {
		LOGGER.info("error: {}", e);
	}
    return path;
}


@Override
public Object uploadImage( HttpServletRequest request) {

	CommonsMultipartResolver cmr = new CommonsMultipartResolver(
			request.getServletContext());
	if (cmr.isMultipart(request)) {
		MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) (request);
		Iterator<String> files = mRequest.getFileNames();
		String imgPath = "";
		while (files.hasNext()) {
			MultipartFile mFile = mRequest.getFile(files.next());
			if (mFile != null) {
				String fileName = UUID.randomUUID() + mFile.getOriginalFilename();
				String path = saveFile(mFile,request);
				imgPath += path +";";
			}
		}
	}

	return null;
}

前臺代碼html

<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--標準mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <link rel="stylesheet" type="text/css" href="css/feedback-page.css"/>
        
        <style>
            
            .dynamic_images {  
                width: 100%;  
            }  
              
            .dynamic_images ul {  
                margin: 0;  
                padding: 10px;  
            }  
              
            .dynamic_images ul li {  
               float: left;
                list-style: none;  
                width: 75px;  
            }  
              
            .dynamic_images ul li img {  
                width: 98%;  
                height: 75px;  
            }  
            
            .mui-input-group .mui-input-row {
                height: 40px;
            }
            .mui-input-row {
                position: relative;
            }
            
            mui.min.css:5
            .mui-input-row {
                clear: left;
                overflow: hidden;
            }
            h5 {
                margin: 5px 7px;
            }
            
            .mui-page-content {

                width: 100%;
                height: 100%;
                background-color: #efeff4;
            }
            .feedback p {
                padding: 10px 15px 0;
                font-size: 16px;
                margin-top: 0;
                margin-bottom: 10px;
                color: #000;
            }
            .feedback textarea {
                height: 160px;
                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">新裝設備</h1>
        </header>
        <div class="mui-content">
            <div class="mui-content-padded" style="margin: 5px;">
                <form class="mui-input-group">
                    
                    <div class="mui-input-row">
                        <label>車牌號</label>
                        <input type="text" class="mui-input-clear" id="platenum" data-input-clear="15" disabled="true" value="京NBU035">
                    </div>

                    <div class="mui-input-row">
                        <label>設備編號</label>
                        <input type="text" class="mui-input-clear" id="imei" data-input-clear="15" placeholder="請輸入設備的IMEI">
                    </div>
                    
                    <div class="feedback">
                        <input type="hidden" id="image-path" value="">
                        <p>安裝圖片</p>
                        <div class="dynamic_images">  
                            <ul>  
                                <li><img src="images/iconfont-tianjia.png" id="addnew"></li>   
                            </ul>  
                        </div>  
                    </div>
        
                    <div class="mui-button-row" style="clear: both;">
                        <button id="saveBtn" type="button" class="mui-btn mui-btn-primary">確認</button>&nbsp;&nbsp;
                        <button type="button" class="mui-btn mui-btn-danger">取消</button>
                    </div>
                </form>
            </div>
        </div>
        <script src="js/mui.min.js"></script>
        <script src='js/feedback.js'></script>
        <script src='js/jquery-1.12.4.min.js'></script>
        <script src="js/app.js"></script>
        <script>
            var files = []; 
            (function($, doc) {
                mui.init({
                    swipeBack: true //啓用右滑關閉功能
                });
            
                
                document.addEventListener("plusready", plusReady, false);  
  
                function plusReady() {
                    var wv = plus.webview.currentWebview();
                    document.getElementById("addnew").addEventListener("tap", function() {  
                        showActionSheet();//拍照仍是相冊  
                    });
                    document.getElementById("platenum").value = wv.platenum;
                  
                    plus.nativeUI.closeWaiting();
                  
                }  
            }(mui, document));
             
        
            document.getElementById("saveBtn").addEventListener('tap', function() {
                   upload();
            });
             
             
            // 上傳文件  
            function upload() {  
                
                var platenum = document.getElementById('platenum').value;
                var imei = document.getElementById('imei').value;
                var task = plus.uploader.createUpload('http://192.168.8.101:8989/api/v1/vehicle/uploadImage', {  
                        method: "POST"  
                    },
                    function(t, status) { //上傳完成  
                        if (status == 200) {
                            var result =jQuery.parseJSON(t.responseText);
                            mui.toast(result.message);  
                              
                        } else {  
                            console.log("上傳失敗：" + status);
                        }  
                    }
                );  
            
                for (var i = 0; i < files.length; i++) {
                    var f = files[i]; 
                    task.addFile(f.path, {  
                        key:f.name
                    });
                    
                   }
                task.addData('platenum',platenum);
                task.addData('imei',imei);
                task.start();     
                  
            }  
              
            // 添加文件  
            var index = 1;  
            var newUrlAfterCompress;  
            function appendFile(p) {  
                files.push({ 
                    path: p,
                    name: "uploadkey_" + index
                });  
                index++;  
            }  
            // 產生一個隨機數  
            function getUid() {  
                return Math.floor(Math.random() * 100000000 + 10000000).toString();  
            }  
              
            
              
            function galleryImgs() { // 從相冊中選擇圖片  
                plus.gallery.pick(function(e) {  
                    //$(".dynamic_images ul li").remove(".pickimg");  
                    console.log("選擇了"+e.files.length+"個圖片");  
                    for (var i = 0; i < e.files.length; i++) {  
                        if (i < 9) {  
                            $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + e.files[i] + "' /></li>");  
                            var dstname="_downloads/"+getUid()+".jpg";//設置壓縮後圖片的路徑  
                            newUrlAfterCompress=compressImage(e.files[i],dstname);  
                            appendFile(dstname);
                        }  
                    }  
                }, function(e) {  
                    console.log("取消選擇圖片");  
                }, {  
                    filter: "image",  
                    multiple: true  
                });  
            }  
              
            //壓縮圖片，這個比較變態的方法，沒法return  
            function compressImage(src,dstname) {  
                //var dstname="_downloads/"+getUid()+".jpg";  
                plus.zip.compressImage({  
                        src: src,  
                        dst: dstname,  
                        overwrite:true,  
                        quality: 20  
                    },  
                    function(event) {  
                        //console.log("Compress success:"+event.target);  
                        return event.target;  
                    },  
                    function(error) {  
                        console.log(error);  
                        return src;  
                        //alert("Compress error!");  
                    });  
                  
            }  
            
              
            function showActionSheet() {  
                var bts = [{  
                    title: "拍照"  
                }, {  
                    title: "從相冊選擇"  
                }];  
                plus.nativeUI.actionSheet({  
                        cancel: "取消",  
                        buttons: bts  
                    },  
                    function(e) {  
                        if (e.index == 1) {  
                            getImage();  
                        } else if (e.index == 2) {  
                            galleryImgs();  
                        }  
                    }  
                );  
            }  
            //拍照  
            function getImage() {  
                var cmr = plus.camera.getCamera();  
                cmr.captureImage(function(p) {  
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                        var localurl = entry.toLocalURL(); //  
                        //$(".dynamic_images ul li").remove(".pickimg");  
                        $(".dynamic_images ul").prepend("<li class='pickimg'><img src='" + localurl + "' /></li>");  
                         var dstname="_downloads/"+getUid()+".jpg";//設置壓縮後圖片的路徑  
                            newUrlAfterCompress=compressImage(localurl,dstname);  
                            appendFile(dstname); 
                    });  
                });  
            }  
        </script>
    </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程