pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

利用HTML5的新特點實現圖片文件異步上傳_html5教程

html5教程 html5模板網
利用HTML5的新特點實現圖片文件異步上傳_html5教程技巧HTML5中文學習網，是中國最大的HTML5中文門戶，為廣大HTML5愛好者提供各種HTML5資料，包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、
點評：利用HTML5的新特點做文件異步上傳非常簡單方便，首先利用css的z-index屬性將input=file標簽隱藏在了id=btnSelect元素下面，通過觸發a標簽的點擊后，彈出文件選擇框
利用HTML5的新特點做文件異步上傳非常簡單方便，本文主要展示JS部分，html結構。下面的代碼并未使用第三發庫，如果有參照，請注意一些未展現出來的代碼片段。我這邊的效果預覽：

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()方法獲取預覽路徑。

代碼：

復制代碼代碼如下:

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);
}
}
});

以上則為全部主要代碼部分，如果有什么問題可以聯系我，歡迎交流。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

主站蜘蛛池模板： 深圳离婚律师咨询「在线免费」华荣深圳婚姻律师事务所专办离婚纠纷案件 | 可程式恒温恒湿试验箱|恒温恒湿箱|恒温恒湿试验箱|恒温恒湿老化试验箱|高低温试验箱价格报价-广东德瑞检测设备有限公司 | 碳纤维布-植筋胶-灌缝胶-固特嘉加固材料公司 | 一礼通 (www.yilitong.com)-企业礼品解决方案一站式服务平台 | 动物解剖台-成蚊接触筒-标本工具箱-负压实验台-北京哲成科技有限公司 | 变频器维修公司_plc维修_伺服驱动器维修_工控机维修 - 夫唯科技 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城，价格更超值，品质有保障! | 123悬赏网_发布悬赏任务_广告任务平台 | 智能门锁电机_智能门锁离合器_智能门锁电机厂家-温州劲力智能科技有限公司 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 选矿设备,选矿生产线,选矿工艺,选矿技术-昆明昆重矿山机械 | 加盟店-品牌招商加盟-创业项目商机平台 | DAIKIN电磁阀-意大利ATOS电磁阀-上海乾拓贸易有限公司 | 高尔夫球杆_高尔夫果岭_高尔夫用品-深圳市新高品体育用品有限公司 | 建筑资质代办-建筑企业资质代办机构-建筑资质代办公司 | 数码管_LED贴片灯_LED数码管厂家-无锡市冠卓电子科技有限公司 | 土壤检测仪器_行星式球磨仪_土壤团粒分析仪厂家_山东莱恩德智能科技有限公司 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 并离网逆变器_高频UPS电源定制_户用储能光伏逆变器厂家-深圳市索克新能源 | 南京种植牙医院【官方挂号】_南京治疗种植牙医院那个好_南京看种植牙哪里好_南京茀莱堡口腔医院 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 钢制暖气片散热器_天津钢制暖气片_卡麦罗散热器厂家 | 除甲醛公司-甲醛检测治理-杭州创绿家环保科技有限公司-室内空气净化十大品牌 | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 深圳货架厂家_金丽声精品货架_广东金丽声展示设备有限公司官网 | 压砖机、液压制砖机、静压砖机、环保砖机生产厂家—杜甫机械 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 优宝-汽车润滑脂-轴承润滑脂-高温齿轮润滑油脂厂家 | 深圳昂为官网-气体分析仪,沼气分析仪,动态配气仪,气体传感器厂家 | 恒温油槽-恒温水槽-低温恒温槽厂家-宁波科麦仪器有限公司 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 福兰德PVC地板|PVC塑胶地板|PVC运动地板|PVC商用地板-中国弹性地板系统专业解决方案领先供应商! 福建成考网-福建成人高考网 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 纳米涂料品牌 防雾抗污纳米陶瓷涂料厂家_虹瓷科技 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 苏州同创电子有限公司 - 四探针测试仪源头厂家 | 烽火安全网_加密软件、神盾软件官网 |