快捷導(dǎo)航

Jquery實現(xiàn)異步上傳文件

更新時間：2022年07月15日 09:07:49 作者：卡布奇諾的奇泡

這篇文章主要為大家詳細介紹了Jquery實現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Jquery實現(xiàn)異步上傳文件的具體代碼，供大家參考，具體內(nèi)容如下

一、參數(shù)說明

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

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

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

二、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,可以隨心所欲了
? ? }?
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: