运用HTML5的新特性完成照片文档多线程提交

日期:2020-09-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

运用HTML5的新特性做文档多线程提交十分简易便捷,本文关键展现JS一部分,html构造。下面的编码仍未应用第3发库,假如有参考,请留意1些未呈现出来的编码片断。我这边的实际效果预览:

1.文档未挑选 2.文档已挑选
 
 
HTML编码一部分:

思路:下面编码中我运用css的z-index特性将input="file”标识掩藏在了id=btnSelect元素下面,根据开启a标识的点一下后,弹出文档挑选框。下面的masklayer用于点一下确定按钮后的弹出层,防止客户反复点一下确定按钮。

拷贝编码
编码以下:

<div id="wp" class="warpper">
<a id="btnSelect">点击挑选要提交的相片</a>
<input id="uploadFile" type="file" name="myPhoto" />
<button id="btnConfirm" class="btn" >确定提交</button>
</div>
<div id="maskLayer" class="mask-layer" style="display:none;">
<p>照片正在提交中...</p>
</div>

JS照片文档认证一部分:

认证一部分为:尺寸,是不是早已挑选,文档的种类 3个一部分。第1个createObject方式为建立当地照片文档的预览相对路径,先后认证是不是为空,文档种类和文档尺寸,不考虑标准则1律回到

false,考虑以上3个标准后,在dom中转化成照片预览,加上img元素,随后运用createObjectURL()方式获得预览相对路径。

编码:

拷贝编码
编码以下:

//获得数据信息的URL详细地址
function createObjectURL(blob) {
if (window.URL) {
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}
//文档检验
function checkFile() {
//获得文档
var file = $$("uploadFile").files[0];
//文档为空分辨
if (file === null || file === undefined) {
alert("请挑选您要提交的文档!");
$$("btnSelect").innerHTML = "点击挑选要提交的相片";
return false;
}
//检验文档种类
if(file.type.indexOf('image') === ⑴) {
alert("请挑选照片文档!");
return false;
}
//测算文档尺寸
var size = Math.floor(file.size/1024);
if (size > 5000) {
alert("提交文档不可超出5M!");
return false;
};
//加上预览照片
$$("btnSelect").innerHTML = "<img class=\"photo\" src=\""+createObjectURL(file)+"\"/>";
};

JS Ajax恳求一部分:

表明:第1个监视文档挑选变更恶性事件,考虑认证标准后则实行预览,第2个恶性事件监视为监视点击btnSelect时弹出对话框的回应,下面的则是确定提交按钮的恶性事件监视,刚开始推送Ajax恳求。此处的createXHR()方式为建立XMLHttpRequest目标,编码我仍未贴出,包含addEventListener()方式,这2个一部分能够参照别的文章内容。

拷贝编码
编码以下:

拷贝编码
//监视照片URL详细地址变更
addEventListener($$("uploadFile"), "change", function() {
checkFile();
});
//监视点击文档挑选按钮
addEventListener($$("btnSelect"), "click", function() {
//弹出文档挑选框
$$("uploadFile").click();
});
//监视确定提交按钮的点一下恶性事件
addEventListener($$("btnConfirm"), "click", function(e) {
if (checkFile()) {
try {
//实行提交实际操作var xhr = createXHR();
$$("maskLayer").style.display = "block";
xhr.open("post","/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";
};
};
//表奇数据
var fd = new FormData();
fd.append("myPhoto", $$("uploadFile").files[0]);
//实行推送
xhr.send(fd);
} catch (e) {
console.log(e);
}
}
});

以上则为所有关键编码一部分,假如有甚么难题能够联络我,欢迎沟通交流。
上一篇:HTML5中5个简易好用的API 返回下一篇:没有了