JAVA實現客戶端圖片上傳至服務器(SSM)(不使用input 標籤使用,瀏覽器圖片直接上傳服務器)

JAVA實現客戶端圖片上傳至服務器(SSM)(不使用input 標籤使用,瀏覽器圖片直接上傳服務器)

這是本人第一篇博客 想着記錄一下平時學習的過程,也提供給和我一樣正在學習java的同學們!!(如果有不懂的同學歡迎留言 有時間一定回覆,寫的不好的地方請多包涵)
*

開始:
首先要寫這篇博客的目的是因爲 跟進的項目需求 實現截圖上傳到服務器並在數據庫中保存圖片在服務器的路徑!本人當時採取了以下方法:

	1.使用java截圖並保存到本地(不懂的同學可以參考"https://blog.csdn.net/sanluo11/article/details/61923549")
	這種方法並不能滿足我的需求,因爲java截取的圖片是服務器端的圖片對於web項目這顯然不能達到需求,因爲要截取客戶端(瀏覽器)的圖片。於是採用方法二
	2.使用<input type='file'>標籤 進行文件上傳(此方法確實可以實現,有需要的同學可以參考"https://blog.csdn.net/swingpyzf/article/details/20230865")
	這種方法同樣不能滿足需求 因爲要截圖上傳服務器 客戶本地存放圖片沒有任何意義 而且需要使用<input>標籤去選擇 所以最後 經過不斷百度總結 實現了方法三(構建file文件通過request攜帶到controller層進行獲取)
	3. html2canvas實現截圖 使用Ajax. form表單進行提交及構造file文件

廢話不多說 上代碼:
(1).html2canvas實現屏幕截圖:
HTML部分:

<form method="post" id="file" action="" enctype="multipart/form-data">
		<div class="screen">
        <span class="text-info">截屏區域:</span>
            <span class="text-info">處理人:${user.userName}</span>
        <%--<input id="picture" type="button" class="btn btn-default btn-sm btn-info"  onclick="capture()" value="截屏">--%>
            <input id="picture" type="button" class="btn btn-default btn-sm btn-info"  value="截屏">
        </div>
       <div class="submit">
        <input class="btn btn-primary" name="提交" type="button" onclick="captureScreen();" value="提交">
            </div>
</form>
JS部分:
var myFile;
//#picture是截屏按鈕的id值
$("#picture").on("click", function(event) {
                if(i<3) {
                    event.preventDefault();
                    var w=window.innerWidth;
                    var h=window.innerHeight;
                    var canvas=document.createElement("canvas");
                    canvas.height=w*2;
                    canvas.width=w*2;
                    canvas.style.height=w+"px";
                    canvas.style.width=h+"px";
                    var context=canvas.getContext("2d");
                    context.scale(2,2)
                     html2canvas(document.body, {
                    // html2canvas($("#apDiv"), {
                         canvas:canvas,
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function (canvas) {
                            canvas.id = "mycanvas";
                            //document.body.appendChild(canvas);
                            //生成base64圖片數據
                            dataUrl = canvas.toDataURL();
                            //#picturelists是自己構建一個div  id是#picturelists去顯示截圖
                            $("#picturelists").append('<img onclick="big(this)" id="img' + i + '"class="screenPicture" style="width:100px;height:100px;margin: 5px; border: 1px solid black" src=' + dataUrl + '>');
                            i++;
                            //將base64轉化爲file
                            var timestamp =makeid();
                            filename=timestamp+".jpg";
                            console.log(filename);
                            myFile.push(dataURLtoFile(dataUrl, timestamp+'.jpg'));
                            capture();
                        }
                    });
                }
                else {
                    alert("最多隻能存放三張!");
                }
            });

效果圖如下:
在這裏插入圖片描述

(2).*最關鍵的部分(base64與file文件的轉換)

//將base64轉換爲文件
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }
(3).提交按鈕實現文件上傳
	JS部分:
function uploadFiles(){
		//獲取第一張截圖
        var file1=myFile.pop();
        //獲取第二張截圖
        var file2=myFile.pop();
        //獲取第三張截圖
        var file3=myFile.pop();
        var form=document.getElementById("file");
        //使用ajax提交form表單
        var uploadFile = new FormData(form);
        uploadFile.append("files",file1);
        uploadFile.append("files",file2);
        uploadFile.append("files",file3);
        if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != "") {
            $.ajax({
                url: 'file/fileupload.do',
                type: 'POST',
                data: uploadFile,
                async: false,
                cache: true,
                contentType: false, //不設置內容類型
                processData: false, //不處理數據
                error: function () {
                    alert("上傳失敗!");
                }
            });
        }
    }

到此文件已經可以被form表單所攜帶到controller層,接下來我們只需要後臺獲取文件並上傳到服務器即可。
(4).
java代碼:

@Controller
    @RequestMapping("/file")
    public class fileupload {
        @RequestMapping(value = "/fileupload.do" ,method= RequestMethod.POST)
        @ResponseBody
        public String upload( HttpServletRequest request) throws IOException {
        //將request轉換成文件上傳的MultipartHttpServletRequest
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//獲取三張傳過來的圖片(file)
            List<MultipartFile> files=multipartRequest.getFiles("files");
        //獲取服務器端路徑存放到'updata'路徑下
            String path = request.getSession().getServletContext().getRealPath("updata");
            if (files.isEmpty()) {
                return "false";
            }
            for (MultipartFile file : files) {
                String fileName = file.getOriginalFilename();
                int size = (int) file.getSize();
                System.out.println(fileName + "-->" + size);
                if (file.isEmpty()) {
                    return "false";
                } else {
                    File dest = new File(path + "/" + fileName);
                    if (!dest.getParentFile().exists()) { 
                    // 判斷文件父目錄是否存在
                        dest.getParentFile().mkdir();
                    }
                    try {
                    //文件上傳服務器
                        file.transferTo(dest);
                    } catch (Exception e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                        return "false";
                    }
                }
            }
            return "true";
        }
    }

效果圖:

在這裏插入圖片描述

到此你可以去服務器端看下updata目錄下是否有你之前的三張圖片了。
如果有什麼問題歡迎留言討論!本人第一篇博客如有不好 請諒解 以後會多多改善!!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章