Jquery實現異步上傳文件

Posted on by

本文實例為大傢分享瞭Jquery實現異步上傳文件的具體代碼，供大傢參考，具體內容如下

一、參數說明

1、contentType：(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數情況。如果你明確地傳遞瞭一個content-type給 $.ajax() 那麼他必定會發送給服務器（即使沒有數據要發送）。

2、processData：(默認: true) 默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講隻要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

3、FormData：XMLHttpRequest Level 2添加瞭一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件。

二、HTML代碼

<form action="upload.do" id="upForm" method="post" enctype="multipart/form-data">
<table id="table_report" class="table table-striped table-bordered table-hover">
    <tr>
        <td>批量文件:</td>
        <td><input type="file" name="myfile"></td>
    </tr>
    <tr>
        <td><button type="button" id="saveBtn" class="btn btn-primary">提交</button></td>
    </tr>
</table>
</form>

三、Jquery上傳文件代碼

var uploading = false;
if(uploading){
    bootbox.alert("文件正在上傳中，請稍候!");
    return false;
}
$.ajax({
    url:"upload.do",
    type: "POST",//方法類型
    cache : false,//
    processData: false,
    contentType: false,
    dataType:"json",
    //data:$('#upForm').serialize(),
    data: new FormData($('#upForm')[0]),
    beforeSend: function(){
        uploading = true;
        console.log(uploading);
    },
    success: function(data){
        var json=eval('(' + data + ')');
        if(json.result=="success"){
            bootbox.alert("操作成功!");
        }else{
            bootbox.alert(json.msg);
        }
        uploading = false;
    },error:function(){
        bootbox.alert("請求失敗!");
    }
});

四、Java後臺代碼

@RequestMapping(value="/upload",method = RequestMethod.POST)
@ResponseBody
public String upfile(@RequestParam("myfile")MultipartFile myfile,
    MultipartHttpServletRequest request) {
    logger.info("===上傳文件===");
    Map<String, String> map = new HashMap<String, String>();
    if (request.getContentLength() > 0) {
        String fileName = myfile.getOriginalFilename();
        InputStream inputStream = null;
        inputStream = myfile.getInputStream();
        //TODO拿這inputstream,可以隨心所欲瞭
    } 
}

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：