利用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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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
一个ftp类(ini.php)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
js右键菜单效果代码
2007/07/21 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
2014庆六一活动方案
2014/03/02 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
新春联欢会主持词
2014/03/24 职场文书
初中新生军训方案
2014/05/13 职场文书
运动员入场前导词
2015/07/20 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
浅谈JavaScript作用域
2021/12/06 Javascript