AjaxFileUpload.js并不是一個很出名的插件，只是別人寫好的放出來供大家用，原理都是創建隱藏的表單和iframe然后用JS去提交，獲得返回值。

當初做了個異步上傳的功能，選擇它因為它的配置方式比較像jQuery的AJAX，我很喜歡。

評論里面說到的不行。那是因為我們用的不是同一個js。我上github搜AjaxFileUpload出來很多類似js。

ajaxFileUpload是一個異步上傳文件的jQuery插件

傳一個不知道什么版本的上來，以后不用到處找了。

語法：$.ajaxFileUpload([options])

options參數說明：

1、url　　　　　　　　　　? 上傳處理程序地址。

2，fileElementId　　　　　? 需要上傳的文件域的ID，即的ID。

3，secureuri　　　　　　　 是否啟用安全提交，默認為false。

4，dataType　　　　　　　 服務器返回的數據類型。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。

5，success　　　　　　　　提交成功后自動執行的處理函數，參數data就是服務器返回的數據。

6，error　　　　　　　　　 提交失敗自動執行的處理函數。

7，data 　　　　　　　　　 自定義參數。這個東西比較有用，當有數據是與上傳的圖片相關的時候，這個東西就要用到了。

8, type 　　　　　　　　　? 當要提交自定義參數時，這個參數要設置成post

錯誤提示:

1、SyntaxError: missing ; before statement錯誤

如果出現這個錯誤就需要檢查url路徑是否可以訪問

2、SyntaxError: syntax error錯誤

如果出現這個錯誤就需要檢查處理提交操作的服務器后臺處理程序是否存在語法錯誤

3、SyntaxError: invalid property id錯誤

如果出現這個錯誤就需要檢查文本域屬性ID是否存在

4、SyntaxError: missing } in XML expression錯誤

如果出現這個錯誤就需要檢查文件name是否一致或不存在

5、其它自定義錯誤

大家可使用變量$error直接打印的方法檢查各參數是否正確，比起上面這些無效的錯誤提示還是方便很多。

使用方法：

第一步：先引入jQuery與ajaxFileUpload插件。注意先后順序，這個不用說了，所有的插件都是這樣。

第二步：HTML代碼：

第三步：JS代碼

$(function () {

$(":button").click(function () {

ajaxFileUpload();

})

})

function ajaxFileUpload() {

$.ajaxFileUpload

(

{

url: '/upload.aspx', //用于文件上傳的服務器端請求地址

secureuri: false, //是否需要安全協議，一般設置為false

fileElementId: 'file1', //文件上傳域的ID

dataType: 'json', //返回值類型 一般設置為json

success: function (data, status) //服務器成功響應處理函數

{

$("#img1").attr("src", data.imgurl);

if (typeof (data.error) != 'undefined') {

if (data.error != '') {

alert(data.error);

} else {

alert(data.msg);

}

}

},

error: function (data, status, e)//服務器響應失敗處理函數

{

alert(e);

}

}

)

return false;

}

第二個例子

使用ajaxFileUpload上傳文件時,有時需要帶參數提交,網上有很多資料說使用data,但其實要使用data帶參數是需要修改的,否則后臺是獲取不到的.

分析原因：

ajaxFileUpload為了實現無刷新異步提交文件,構建 iframe 然后創建form表單 再將要上傳的文件寫上去再提交.但是原代碼 卻沒有處理data.所以這塊內容需要我們自己加上去.

下面紅色部分為修改ajaxFileUpload.js的三處地方:

備注:好像csdn代碼中加顏色加粗? 有問題這三處修改的地方我直接貼出來,位置看下面的代碼,

①createUploadForm: function(id, fileElementId,data);

②if (data) {

for (var i in data) {

$('').appendTo(form);

}

}

③var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

ajaxFileUpload為了實現無刷新異步提交文件,構建 iframe 然后創建form表單 再將要上傳的文件寫上去再提交.但是原代碼 卻沒有處理data.所以這塊內容需要我們自己加上去.

下面紅色部分為修改ajaxFileUpload.js的三處地方:

備注:好像csdn代碼中加顏色加粗? 有問題這三處修改的地方我直接貼出來,位置看下面的代碼,

createUploadForm: function(id, fileElementId,data);

if (data) {

for (var i in data) {

$('').appendTo(form);

}

}

var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

如何使用它呢？

$.ajaxFileUpload({

url: 'http://localhost:8080/HNUST/crawler/ordinary2',

type: 'post',

data : {

url : url,

keyword : keyword,

rule : rule,

data : data,

sign:sign

},

secureuri: false, //一般設置為false

fileElementId: 'file', // 上傳文件的id、name屬性名

dataType: 'JSON', //返回值類型，一般設置為json、application/json 這里要用大寫 不然會取不到返回的數據

success: function(data, status){

alert(data);

},

error: function(data, status, e){

alert(e);

}

});

html：

java：java后臺 獲取參數還是正常獲取:

String url=request.getParameter("url");

String keyword=request.getParameter("keyword");

獲取文件并分行讀取(非圖片):

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

MultipartFile multipartFile = multipartRequest.getFile("file"); //這個file要與fileElementId一致

try {

InputStream inputStream=multipartFile.getInputStream();

BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));

String tempString = null;

// 一次讀入一行，直到讀入null為文件結束

while ((tempString = reader.readLine()) != null) {

fileList.add(tempString);

}

} catch (IOException e2) {

// TODO Auto-generated catch block

e2.printStackTrace();

}

使用過程中有兩點需要注意的地方：

其一，dataType必須要大寫；

其二，在data的值要寫成json的格式，否則后臺無法接受參數

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

總結

以上是生活随笔為你收集整理的jq ajax异步上传文件,jQuery插件ajaxFileUpload异步上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。