利用HTML5的新特点实现图片文件异步上传


Posted in HTML / CSS onMay 29, 2014

利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构。下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段。我这边的效果预览:

1.文件未选择 2.文件已选择
利用HTML5的新特点实现图片文件异步上传 
利用HTML5的新特点实现图片文件异步上传 
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图片文件验证部分:

验证部分为:大小,是否已经选择,文件的类型 三个部分。第一个createObject方法为创建本地图片文件的预览路径,依次验证是否为空,文件类型以及文件大小,不满足条件则一律返回

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') === -1) {
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请求部分:

说明:第一个监听文件选择更改事件,满足验证条件后则执行预览,第二个事件监听为监听单击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);
}
}
});

以上则为全部主要代码部分,如果有什么问题可以联系我,欢迎交流。
HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 #HTML / CSS
html5设计原理(推荐收藏)
May 17 #HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 #HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 #HTML / CSS
分享全球十款超强HTML5开发工具
May 14 #HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 #HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 #HTML / CSS
You might like
php实现上传图片保存到数据库的方法
2015/02/11 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
Vue使用vue-cli创建项目
2017/09/01 Javascript
关于vue面试题汇总
2018/03/20 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
如何使用python切换hosts文件
2020/04/29 Python
python suds访问webservice服务实现
2020/06/26 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
师范大学毕业自我鉴定
2013/11/21 职场文书
道路交通安全实施方案
2014/03/12 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
办公室管理规章制度
2015/08/04 职场文书
学校远程教育工作总结
2015/08/11 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
python数字类型和占位符详情
2022/03/13 Python