jquery+html5实现单张图片上传预览
js:
if (window.File && window.FileReader && window.FileList && window.Blob){
//Blob是计算机界通用术语之一,全称写作:BLOB (binary large object),表示二进制大对象。
//全部支持
function handleFileSelect(evt) {
var files = evt.target.files, f = files[0];
if (!/image\/\w+/.test(f.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var show_pic = document.getElementById("show_pic");
show_pic.src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
}else {
alert('该浏览器不全部支持File APIs的功能');
}
html:
<input type="file" id="files" name="files[]" multiple="">
<img src="" id="show_pic">
jquery+html5实现单张图片上传预览的更多相关文章
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- html 图片上传预览
Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- signup图片上传预览经常总结
html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
随机推荐
- PCL库在Linux环境下的编译安装
PCL库在Linux环境下的编译安装 PCL库的源码库:https://github.com/PointCloudLibrary/pcl 下载完了之后解压下来 编译库的几个步骤 mkdir build ...
- Python:输入关键字进行百度搜索并爬取搜索结果
学习自:手把手教你用Python爬取百度搜索结果并保存 - 云+社区 - 腾讯云 如何利用python模拟百度搜索,Python交流,技术交流区,鱼C论坛 指定关键字,对其进行百度搜索,保存搜索结果, ...
- VS Code nodejs智能补全typings
安装typings node.js自动补全使用npm全局安装typings npm install -g typings -安装语法插件以安装node.js自动补全为例,在项目根目录下使用bash或者 ...
- out与err输出流
System.in.System.out与System.err 当我们查阅文档可知,out与err都是Java中的输出流,in是"标准"输入流,System.out是"标 ...
- python+pytest接口自动化(6)-请求参数格式的确定
我们在做接口测试之前,先需要根据接口文档或抓包接口数据,搞清楚被测接口的详细内容,其中就包含请求参数的编码格式,从而使用对应的参数格式发送请求.例如某个接口规定的请求主体的编码方式为 applicat ...
- linux php 环境word转pdf、excel转pdf、office转pdf
最近项目中遇到一个需求,将word.excel文件转换成pdf,并且打上水印,我利用的是libreoffice,这个需要Java 的jdk环境.废话不多说,开撸 1.在linux上搭建jdk环境 文章 ...
- mixin混入
mixin(混入) 功能:可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步定义混合,例如: { data(){.........}, methods:{.........} ...... ...
- Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点
前面已经支持了几种不同的方式添加断点,但是必须事先在代码中添加断点,在使用上不是那么灵活方便.本文将支持动态增删断点,只需要开一开始引入调试库即可,后续可以在调试过程中动态的添加和删除断点.事不宜迟, ...
- map, reduce和filter(函数式编程)
# map可以用于对可遍历结构的每个元素执行同样的操作,批量操作: map(lambda x: x**2, [1, 2, 3, 4]) # [1, 4, 9, 16] map(lambda x, y: ...
- 理解HMM算法
长这样: 理解的前提: (1)状态:生成观测值的变量(上图中的"吃"和"睡"). (2)观测值:状态乘上输出概率对应的输出(上图中的橙色节点). (3)输出概率 ...