file upload jquery上傳是一個非常常見的前端實現,具有方便快捷、易于使用的特點。
下面我們來看一下如何使用jquery實現文件上傳的功能:
$('form').submit(function(event) { event.preventDefault(); // 阻止表單默認提交動作 var formData = new FormData($(this)[0]); // 獲取表單數據 $.ajax({ url: 'upload.php', // 后臺處理文件上傳的php文件 type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function(response) { console.log(response); }, error: function() { console.log('文件上傳失敗'); } }); });
以上代碼中,通過$('form')選中表單元素,并設置submit事件的回調函數。在回調函數中,我們首先阻止表單的默認提交行為,然后通過FormData對象獲取表單數據,并通過$.ajax()方法發送異步請求。其中,url參數指定后臺處理文件上傳的php文件,type參數指定請求方式為POST,data參數為表單數據。而contentType和processData參數均被置為false,是為了避免數據被轉換成字符串而上傳失敗。
通過以上代碼我們可以實現文件上傳的功能,同時也方便了開發者進行前端開發。