HTML5實作簡單圖片上傳所遇到的問題及解決方法 _html5教學技巧

 一、展示
因為前端上傳文件是必須通過form表單的，不能使用ajax，這樣的話一個移動頁放入一個type為file的input真心不怎麼好看，如下圖，很挫有沒有

解決方法找了下，PC上有些是把這個input換成flash，採用jquery的工具庫比如uploadify來做，但是移動端大部分瀏覽器是不支援flash的。所以最後採用的方法還是用form表單的形式，只是把這個form和input的透明度設為0，讓它們和準備顯示的內容同時在一個div中，顯示的內容可以做成自己想要的樣子。代碼如下：

複製代碼

代碼如下:

上傳圖片

樣子如上圖，這樣展現就在「上傳圖片」這個p標籤中，點擊它就有選擇file的效果
二、JS代碼

我這邊寫的蠻簡單的，只是用了下h5上傳的的基本功能
html程式碼如下，action為要請求的路徑，我這邊做的是當檔案改變時就上傳修改頭像，input標籤的name屬性不能省去，具體跟後端接口有關

複製代碼

代碼如下:

var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
var oFile = document.getElementById('imageFile' ).files[0]; //讀取檔案
var rFilter = /^(image/bmp|image/gif|image/jpeg|image/png|image/tiff)$/i;
if ( !rFilter.test(oFile.type)) {
alert("檔案格式必須為圖片");
return;
}
if (oFile.size > iMaxFilesize) {
alert ("圖片大小不能超過2M");
return;
}
var vFD = new FormData(document.getElementById('uploadForm')), //建立請求與資料
oXHR = new XMLHttpRequest();
oXHR.addEventListener('load', function(resUpload) {
//成功
}, false);
oXHR.addEventListener('error', function() {
//失敗
}, false);
oXHR.addEventListener('abort', function() {
//上傳中斷
}, false);
oXHR.open( 'POST', actionUrl);
oXHR.send(vFD);
};

以上內容跟大家分享了HTML5實作簡單圖片上傳所遇到的問題及解決方法的相關知識，希望對大家有幫助。