jquery mobile 上傳附件
jquery mobile被廣泛應用于移動應用開發,其中上傳附件是常見的功能。在jquery mobile中,我們可以使用文件選擇器(file input)和ajax(form.serialize())來實現上傳附件。
1. 文件選擇器
文件選擇器是通過input元素type屬性設置為"file"來實現的,用于選擇上傳的文件。我們可以使用jquery選擇器獲取文件選擇器的值,并通過ajax將文件上傳至服務器端。
$(document).on('change', '#file-selector', function(){
var file = $(this).prop('files')[0];
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data){
alert(data);
}
});
});
在上述代碼中,我們監聽文件選擇器(change事件),使用prop方法獲取選擇的文件,通過FormData對象創建表單數據,使用ajax將表單數據上傳至服務器端,同時關閉jquery的cache和ProcessData選項。
2. ajax
另一種常見的上傳附件方法是通過ajax(form.serialize()),將整個表單數據(包括文件)序列化后,上傳至服務器端。$(document).on('submit', '#file-upload-form', function(event){
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
alert(data);
}
});
return false;
});
在上述代碼中,我們監聽表單提交事件(submit事件),使用preventDefault方法阻止瀏覽器默認的提交行為,創建表單數據,使用ajax將表單數據上傳至服務器端,同時關閉jquery的cache和ProcessData選項。
總的來說,在jquery mobile中上傳附件的方式,可以是文件選擇器,也可以是ajax(form.serialize()),具體使用可以根據實際情況進行選擇。上一篇盒子模式 css