jquery.form.js是一個(gè)非常方便的jQuery插件,它使用Ajax技術(shù)使得網(wǎng)頁可以進(jìn)行多文件上傳。這個(gè)插件不僅功能強(qiáng)大,而且使用非常簡便,只需要引入相應(yīng)的JavaScript文件就可以輕松實(shí)現(xiàn)文件上傳功能。
在使用jquery.form.js插件進(jìn)行多文件上傳的過程中,我們需要用到一些常用的函數(shù)。其中,最常用的函數(shù)是ajaxForm()函數(shù)。這個(gè)函數(shù)用來將表單中的數(shù)據(jù)轉(zhuǎn)換為AJAX數(shù)據(jù),并將其發(fā)送到服務(wù)器。
$(document).ready(function(){ $('form').ajaxForm({ beforeSubmit:function(){ console.log('開始上傳文件'); }, success: function(response){ console.log(response); }, error: function(response){ console.log(response); } }); });
上面的代碼片段中,首先我們給所有的form表單綁定了ajaxForm()函數(shù),這樣就可以使表單可以通過Ajax上傳文件了。beforeSubmit函數(shù)定義了一些事先需要執(zhí)行的操作,可以自定義或省略。success函數(shù)和error函數(shù)則分別處理上傳成功和上傳失敗兩種情況下的響應(yīng)。
通過使用jquery.form.js插件,我們可以輕松地上傳多個(gè)文件。下面是一個(gè)實(shí)例代碼:
$("#fileupload").change(function() { $("#imageform").ajaxForm({ dataType: 'json', beforeSend: function() { console.log('開始上傳文件'); }, success: function(data) { console.log(data); }, error: function(data) { console.log(data); } }).submit(); });
在上面的代碼片段中,我們創(chuàng)建了一個(gè)文件上傳的文件選擇框,當(dāng)選擇文件之后,就會(huì)觸發(fā)change事件。在change事件中,我們使用ajaxForm()函數(shù)將表單中的數(shù)據(jù)轉(zhuǎn)換為AJAX數(shù)據(jù),并將其發(fā)送到服務(wù)器。我們使用dataType屬性來指定響應(yīng)的數(shù)據(jù)類型,在本例中我們指定為JSON,這樣就可以訪問JSON響應(yīng)數(shù)據(jù)了。