html上传图片并显示,html 图片上传
利用html5的新特性异步上传文件非常简单方便。本文主要展示JS部分和HTML结构。下面的代码没有使用第三个源代码库。如果有参考的话，请注意一些没有展示的代码片段。我这边效果预览：
1.该文件未被选中。2.文件被选中。
HTML代码部分：
思路：在下面的代码中，我使用css的z-index属性来隐藏id=btnSelect元素下的input=file 标签。触发点击A标签后，弹出文件选择框。下面的masklayer用于点击确认按钮后的弹出层，防止用户重复点击确认按钮。复制代码如下：
div id=wp class=warpper
A id=btnSelect 单击以选择要上载的照片/a
输入id= upload file type= file name= my photo /
按钮ID= BTN确认 class= BTN 确认上传/按钮
/div
div id= mask layer class= mask-layer style= display:none；
p图片正在上传./p
/div
JS图像文件验证部分：
验证部分包括三个部分：大小、是否被选中、文件类型。第一个createObject方法是创建本地图片文件的预览路径，依次验证是否为空、文件类型和文件大小。不符合条件的，退回。
真，满足以上三个条件后，在dom中生成图片预览，添加img元素，然后使用createObjectURL()方法获取预览路径。
代码：复制代码。代码如下：
//获取数据的URL地址
函数createObjectURL(blob) {
如果(窗口。URL) {
返回窗口。URL . createobjecturl(blob)；
} else if (window.webkitURL) {
返回window . webkiturl . createobjecturl(blob)；
}否则{
返回null
}
}
//文件检测
函数checkFile() {
//获取文件
var file=$$(uploadFile )。文件[0]；
//判断文件为空
if(file===null file===undefined){
Alert(请选择您要上传的文件！);
$$(btnSelect )。innerHTML=单击选择要上传的照片；
返回false
}
//检测文件类型
if(file . type . index of( image )===-1){
Alert(请选择一个图片文件！);
返回false
}
//计算文件大小
var size=math . floor(file . size/1024)；
如果(尺寸5000) {
Alert(上传的文件不得超过5M！);
返回false
};
//添加预览图片
$$(btnSelect )。innerHTML= img class=\ photo \ src=\ createObjectURL(file) \ /；
};
Ajax请求部分：
注意：第一个监控文件选择了变更事件，在满足验证条件后，将执行预览。第二个监视器是监视点击btnSelect时弹出窗口的响应，后面的监视器是确认上传按钮并开始发送Ajax请求。这里的createXHR()方法是创建一个XMLHttpRequest对象。我还没有发布代码，包括addEventListener()方法。这两部分可以参考其他文章。复制代码如下：
复制代码
//侦听图片URL地址的更改
addevent listener($ $( uploadFile )， change ，function() {
check file()；
});
//听点击文件选择按钮
addEventListener($$(btnSelect )， click ，function() {
//弹出文件选择框
$$(uploadFile )。单击()；
});
//监控上传确认按钮的click事件。
addevent listener($ $( BTN config )， click ，function(e) {
if (checkFile()) {
尝试{
//执行上传操作var xhr=create xhr()；
$ $( mask layer ). 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(图像上传成功！);
}否则{
Alert(图像上传成功！);
};
$ $( mask layer ). style . display= none ；
};
};
//表单数据
var FD=new FormData()；
fd.append(myPhoto ，$$(uploadFile )。文件[0])；
//执行发送
xhr . send(FD)；
} catch (e) {
console . log(e)；
}
}
});
以上都是主要代码部分。如果你有任何问题，请联系我。欢迎交流。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。