建站
咨詢
售后
建站咨詢
新聞中心
使用HTML5的FileReader API和FormData對(duì)象，將圖片文件異步上傳到服務(wù)器。監(jiān)聽input元素的change事件，獲取圖片文件并進(jìn)行處理。
HTML如何異步上傳圖片
成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、平邑網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為平邑等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
單元1：使用HTML5的File API
步驟：
1、在HTML文件中創(chuàng)建一個(gè)元素，并設(shè)置type屬性為file。
2、添加一個(gè)事件監(jiān)聽器，監(jiān)聽change事件。
3、在事件處理函數(shù)中，通過event.target.files獲取用戶選擇的文件列表。
4、遍歷文件列表，使用FileReader對(duì)象讀取每個(gè)文件的內(nèi)容。
5、將讀取到的文件內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。
示例代碼：
異步上傳圖片
單元2：使用FormData和XMLHttpRequest對(duì)象
步驟：
1、在HTML文件中創(chuàng)建一個(gè)元素，并設(shè)置enctype屬性為multipart/form-data。
2、添加一個(gè)元素，用于選擇要上傳的圖片。
3、添加一個(gè)提交按鈕，并為其添加點(diǎn)擊事件監(jiān)聽器。
4、在事件處理函數(shù)中，通過event.target.files獲取用戶選擇的文件列表。
5、創(chuàng)建一個(gè)FormData對(duì)象，并將文件添加到該對(duì)象中。
6、使用XMLHttpRequest對(duì)象發(fā)送表單數(shù)據(jù)到服務(wù)器進(jìn)行保存。
示例代碼：
異步上傳圖片
當(dāng)前名稱：html如何異步上傳圖片
本文路徑：http://m.5511xx.com/article/cccjohp.html
