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[];
//文件为空判断
if (file === null || file === undefined) {
alert("请选择您要上传的文件!");
$$("btnSelect").innerHTML = "单击选择要上传的照片";
return false;
}
//检测文件类型
if(file.type.indexOf('image') === -) {
alert("请选择图片文件!");
return false;
}
//计算文件大小
var size = Math.floor(file.size/);
if (size > ) {
alert("上传文件不得超过5M!");
return false;
};
//添加预览图片
$$("btnSelect").innerHTML = "<img class=\"photo\" src=\""+createObjectURL(file)+"\"/>";
};

转自:http://www.jb51.net/html5/171339.html

利用H5新特性判断文件大小的更多相关文章

  1. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. 使用h5新特性,轻松监听任何App自带返回键

    1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...

  3. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  4. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  5. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  6. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  7. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  8. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  9. Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好的手绘视频应用

    概述 Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Summit,2019 年开始会以 Mi ...

随机推荐

  1. Linux环境下安装Redis步骤即问题解决

    第一步:将安装包在window平台上解压后拷贝到Linux机器的/usr/soft目录下,并且为文件夹和文件赋予最高权限,chmod+x *: 第二步:进入到redis-3.2.6目录下,执行make ...

  2. ArrayList 、LinkList区别以及速度对比

    概论 1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.      2.对于随机访问get和set,ArrayList优于LinkedList,因为Arra ...

  3. JavaScript的this详解

    1.全局作用域下的this: 2.一般函数与严格模式下的函数的this: 3.当函数的this作为对象的方法的情况下: 4.对象原型链上的this: 对象P的原型指向o, p.a与p.a创建对象p的属 ...

  4. JavaEE XML SAX解析

    SAX解析XML @author ixenos SAX解析工具 SAX解析工具-  Sun公司提供的.内置在jdk中.org.xml.sax.* 核心的API: SAXParser类: 用于读取和解析 ...

  5. Leetcode-37-Sudoku Solver(Hard)

    此处先留空 使用搜索和回溯,递归来实现 参考:http://blog.csdn.net/zxzxy1988/article/details/8586289 描述简介,代码量最少

  6. iOS正则表达

    问题引入 1.要验证用户输入的密码长度是否满足6~18位的长度 ^.{6,18}$ 2.固定电话都是0区号-八位数字的格式,那么正则表达式的匹配如下 ^0\\d{2}\-?\\d{8}$ 3.对于密码 ...

  7. flume 以 kafka 为channel 的配置

    #此配置以kafka的一个topic为channel,相比其他channel类型 file和cache 兼并了快和安全的要求!# Define a kafka channel a1.channels. ...

  8. 【Android】数据共享 sharedPreferences 相关注意事项

    Android 中通过 sharedPreferences 来持久化存储数据并进行共享 在 Activity 或存在 Context 环境中即可使用 context.getSharedPreferen ...

  9. XTU 1246 Heartstone

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$D$题 贪心. 我是这样贪的:开三个优先队列$q[0]$,$q[1]$,$q[2]$,$q[i]$存储对$3$取余之后为$i$的数. 首先看看还 ...

  10. Linux Curl常用命令使用【转】

    Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 1)读取网页 $ curl linuxidc.com">http://www.linuxidc.com 2)保存 ...