利用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 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python坐标线性插值应用实现
2019/11/13 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
婚礼上证婚人致辞
2015/07/28 职场文书
详解python字符串驻留技术
2021/05/21 Python