js實現圖片上傳功能,後臺爲Java

1、首先呢,我們要在前端定義一個<input type="file" id="upload"></input>的標籤

2、在寫js

var formdata=new FormData();//用來封裝數據
var fileValue=$('#uploadPic').val();//獲取文件
if(fileValue.length>0){//判斷文件是否大於0,如果大於0,則代表有數據,則進行下一步,否則進入另外一個ajax
    formdata.append("file",$('#uploadPic')[0].files[0]);
    $.ajax({
        url:"../bizAlert/delBizAlert",
        type: "POST",
        async: false,
        processData: false,   // jQuery不要去處理髮送的數據
        contentType: false,   // jQuery不要去設置Content-Type請求頭
        data:formdata,
        success: function (data) {
            console.log(data);
        },
        error:function(data){
            console.log(data.statusText);
        },
        complete: function (XHR, TS) {
            XHR = null
        } //回收資源
    });
}else{
    $.ajax({
        url:"../bizAlert/delBizAlert2",
        type: "POST",
        async: false,
        processData: false,   // jQuery不要去處理髮送的數據
        contentType: false,   // jQuery不要去設置Content-Type請求頭
        data:formdata,
        success: function (data) {
            console.log(data);
        },
        error:function(data){
            console.log(data.statusText);
        },
        complete: function (XHR, TS) {
            XHR = null
        } //回收資源
    });

3、後臺

@RequestMapping(value = "delBizAlert", method = RequestMethod.POST)
    public Result<BizAlert> delBizAlert(@RequestParam("dealResult") String dealResult,@RequestParam("dealIdea") String dealIdea,@RequestParam("file") MultipartFile files) {
        Result result = new Result();
        return result;
    }

ok了,後臺就接收到前端的圖片數據了。

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