本篇文章主要介紹了JavaScript使用Ajax上傳檔案的範例程式碼,詳細的介紹了兩種上傳方式,有興趣的小夥伴可以了解一下
本文介紹了JavaScript使用Ajax上傳檔案的範例程式碼,分享給大家,如下:
實作檔案的上傳主要有兩種方式:
使用form表單提交上傳
html程式碼如下:
<form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id="upload" type="button">上传</button> </form>
此時的JavaScript程式碼如下:
var formData = new FormDate($('#uploadForm')[0]); $.ajax({ url: 'http://10.10.2.254:8080/file/associateupload', type: 'POST', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log(res); } });
需要注意:
processData設定為false。因為data值是FormData對象,不需要對資料做處理。
cache設定為false,上傳檔案不需要快取。
contentType設定為false。因為是由
使用FormData物件新增欄位方式上傳檔案
#html程式碼如下:
##
<p id="uploadp"> <input id="file" type="file"/> <button id="upload" type="button">上传</button> </p>
var formData = new FormData(); formData.append('file', $('#file')[0].files[0]); $.ajax({ url: '/upload', type: 'POST', cache: false, data: formData, processData: false, contentType: false, success:function(res){ console.log(res); }
以上是JavaScript如何利用Ajax上傳檔案的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!