點評：利用HTML5的新特點做文件異步上傳非常簡單方便，首先利用css的z-index屬性將input=file標簽隱藏在了id=btnSelect元素下面，通過觸發a標簽的點擊后，彈出文件選擇框利用HTML5的新特點做文件異步上傳非常簡單方便，本文主要展示JS部分，html結構。下面的代碼并未使用第三發庫，如果有參照，請注意一些未展現出來的代碼片段。我這邊的效果預覽：
1.文件未選擇 2.文件已選擇
HTML代碼部分：
思路：下面代碼中我利用css的z-index屬性將input="file”標簽隱藏在了id=btnSelect元素下面，通過觸發a標簽的點擊后，彈出文件選擇框。下面的masklayer用于點擊確認按鈕后的彈出層，避免用戶重復點擊確認按鈕。
1.文件未選擇 2.文件已選擇
HTML代碼部分：
思路：下面代碼中我利用css的z-index屬性將input="file”標簽隱藏在了id=btnSelect元素下面，通過觸發a標簽的點擊后，彈出文件選擇框。下面的masklayer用于點擊確認按鈕后的彈出層，避免用戶重復點擊確認按鈕。
復制代碼代碼如下:
<div id="wp" class="warpper">
<a id="btnSelect">單擊選擇要上傳的照片<http://pic.html5code.net/a>
<input id="uploadFile" type="file" name="myPhoto" http://pic.html5code.net/>
<button id="btnConfirm" class="btn" >確認上傳<http://pic.html5code.net/button>
<http://pic.html5code.net/div>
<div id="maskLayer" class="mask-layer" style="display:none;">
<p>圖片正在上傳中...<http://pic.html5code.net/p>
<http://pic.html5code.net/div>
JS圖片文件驗證部分：
驗證部分為：大小，是否已經選擇，文件的類型 三個部分。第一個createObject方法為創建本地圖片文件的預覽路徑，依次驗證是否為空，文件類型以及文件大小，不滿足條件則一律返回
false,滿足以上3個條件后，在dom中生成圖片預覽，添加img元素，然后利用createObjectURL()方法獲取預覽路徑。
代碼：
<div id="wp" class="warpper">
<a id="btnSelect">單擊選擇要上傳的照片<http://pic.html5code.net/a>
<input id="uploadFile" type="file" name="myPhoto" http://pic.html5code.net/>
<button id="btnConfirm" class="btn" >確認上傳<http://pic.html5code.net/button>
<http://pic.html5code.net/div>
<div id="maskLayer" class="mask-layer" style="display:none;">
<p>圖片正在上傳中...<http://pic.html5code.net/p>
<http://pic.html5code.net/div>
JS圖片文件驗證部分：
驗證部分為：大小，是否已經選擇，文件的類型 三個部分。第一個createObject方法為創建本地圖片文件的預覽路徑，依次驗證是否為空，文件類型以及文件大小，不滿足條件則一律返回
false,滿足以上3個條件后，在dom中生成圖片預覽，添加img元素，然后利用createObjectURL()方法獲取預覽路徑。
代碼：
復制代碼代碼如下:
http://pic.html5code.net/http://pic.html5code.net/獲取數據的URL地址
function createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
http://pic.html5code.net/http://pic.html5code.net/文件檢測
function checkFile() {
http://pic.html5code.net/http://pic.html5code.net/獲取文件
var file = $$("uploadFile").files[0];
http://pic.html5code.net/http://pic.html5code.net/文件為空判斷
if (file === null || file === undefined) {
alert("請選擇您要上傳的文件！");
$$("btnSelect").innerHTML = "單擊選擇要上傳的照片";
return false;
}
http://pic.html5code.net/http://pic.html5code.net/檢測文件類型
if(file.type.indexOf('image') === -1) {
alert("請選擇圖片文件！");
return false;
}
http://pic.html5code.net/http://pic.html5code.net/計算文件大小
var size = Math.floor(file.sizehttp://pic.html5code.net/1024);
if (size > 5000) {
alert("上傳文件不得超過5M!");
return false;
};
http://pic.html5code.net/http://pic.html5code.net/添加預覽圖片
$$("btnSelect").innerHTML = "<img class=http://pic.html5code.net/"photohttp://pic.html5code.net/" src=http://pic.html5code.net/""+createObjectURL(file)+"http://pic.html5code.net/"http://pic.html5code.net/>";
};
JS Ajax請求部分：
說明：第一個監聽文件選擇更改事件，滿足驗證條件后則執行預覽，第二個事件監聽為監聽單擊btnSelect時彈出窗口的響應，下面的則是確認上傳按鈕的事件監聽，開始發送Ajax請求。此處的createXHR()方法為創建XMLHttpRequest對象，代碼我并未貼出，包括addEventListener()方法，這2個部分可以參考其他文章。
http://pic.html5code.net/http://pic.html5code.net/獲取數據的URL地址
function createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
http://pic.html5code.net/http://pic.html5code.net/文件檢測
function checkFile() {
http://pic.html5code.net/http://pic.html5code.net/獲取文件
var file = $$("uploadFile").files[0];
http://pic.html5code.net/http://pic.html5code.net/文件為空判斷
if (file === null || file === undefined) {
alert("請選擇您要上傳的文件！");
$$("btnSelect").innerHTML = "單擊選擇要上傳的照片";
return false;
}
http://pic.html5code.net/http://pic.html5code.net/檢測文件類型
if(file.type.indexOf('image') === -1) {
alert("請選擇圖片文件！");
return false;
}
http://pic.html5code.net/http://pic.html5code.net/計算文件大小
var size = Math.floor(file.sizehttp://pic.html5code.net/1024);
if (size > 5000) {
alert("上傳文件不得超過5M!");
return false;
};
http://pic.html5code.net/http://pic.html5code.net/添加預覽圖片
$$("btnSelect").innerHTML = "<img class=http://pic.html5code.net/"photohttp://pic.html5code.net/" src=http://pic.html5code.net/""+createObjectURL(file)+"http://pic.html5code.net/"http://pic.html5code.net/>";
};
JS Ajax請求部分：
說明：第一個監聽文件選擇更改事件，滿足驗證條件后則執行預覽，第二個事件監聽為監聽單擊btnSelect時彈出窗口的響應，下面的則是確認上傳按鈕的事件監聽，開始發送Ajax請求。此處的createXHR()方法為創建XMLHttpRequest對象，代碼我并未貼出，包括addEventListener()方法，這2個部分可以參考其他文章。
復制代碼代碼如下:
復制代碼
http://pic.html5code.net/http://pic.html5code.net/監聽圖片URL地址更改
addEventListener($$("uploadFile"), "change", function() {
checkFile();
});
http://pic.html5code.net/http://pic.html5code.net/監聽單擊文件選擇按鈕
addEventListener($$("btnSelect"), "click", function() {
http://pic.html5code.net/http://pic.html5code.net/彈出文件選擇框
$$("uploadFile").click();
});
http://pic.html5code.net/http://pic.html5code.net/監聽確認上傳按鈕的點擊事件
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
http://pic.html5code.net/http://pic.html5code.net/執行上傳操作var xhr = createXHR();
$$("maskLayer").style.display = "block";
xhr.open("post","http://pic.html5code.net/uploadPhoto.action", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "success") {
alert("圖片上傳成功！");
} else {
alert("圖片上傳成功！");
};
$$("maskLayer").style.display = "none";
};
};
http://pic.html5code.net/http://pic.html5code.net/表單數據
var fd = new FormData();
fd.append("myPhoto", $$("uploadFile").files[0]);
http://pic.html5code.net/http://pic.html5code.net/執行發送
xhr.send(fd);
} catch (e) {
console.log(e);
}
}
});
以上則為全部主要代碼部分，如果有什么問題可以聯系我，歡迎交流。
復制代碼
http://pic.html5code.net/http://pic.html5code.net/監聽圖片URL地址更改
addEventListener($$("uploadFile"), "change", function() {
checkFile();
});
http://pic.html5code.net/http://pic.html5code.net/監聽單擊文件選擇按鈕
addEventListener($$("btnSelect"), "click", function() {
http://pic.html5code.net/http://pic.html5code.net/彈出文件選擇框
$$("uploadFile").click();
});
http://pic.html5code.net/http://pic.html5code.net/監聽確認上傳按鈕的點擊事件
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
http://pic.html5code.net/http://pic.html5code.net/執行上傳操作var xhr = createXHR();
$$("maskLayer").style.display = "block";
xhr.open("post","http://pic.html5code.net/uploadPhoto.action", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var flag = xhr.responseText;
if (flag == "success") {
alert("圖片上傳成功！");
} else {
alert("圖片上傳成功！");
};
$$("maskLayer").style.display = "none";
};
};
http://pic.html5code.net/http://pic.html5code.net/表單數據
var fd = new FormData();
fd.append("myPhoto", $$("uploadFile").files[0]);
http://pic.html5code.net/http://pic.html5code.net/執行發送
xhr.send(fd);
} catch (e) {
console.log(e);
}
}
});
以上則為全部主要代碼部分，如果有什么問題可以聯系我，歡迎交流。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。
相關文檔推薦
css3
html5
canvas
域名頁
域名停放
地板
扁平
在線客服
動畫特效
按鈕切換
動畫模板
360
angular
jquery
svg
游戲模板
物流網站
博客
攝影
導航
小說源碼
郵件群發
蘋果cms
微擎微贊
微商
訂單系統
小程序
電影源碼
微信程序
帝國cms
養生網
挖礦網
java視頻
視頻打賞
thinkphp
蜘蛛池
discuz模板
淘寶客
音樂
分發系統
o2o
微擎
視頻教程
商城
掃碼點餐
零售系統
進銷存系統
bootstrap
商城模板
商務合作
廣告設計
驗證碼
門戶
ar
OElove
漫畫網
全景
視頻
區塊鏈
虛擬幣
你畫我猜
卡券
微小區
交友
小游戲
3d
刷單
小米
資源
ai