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实现单张图片上传预览的更多相关文章

  1. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  3. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  4. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  5. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  6. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  7. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  8. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

随机推荐

  1. Qt:QTextStream

    0.说明 QTextStream提供了读写文本文件的接口. QTextStream可以操作QIODevice,  QByteArray 和 QString,调用QTextStream的流操作可以方便的 ...

  2. Qt:lambda表达式

    说明 c11之后加入了lambda表达式,所以Qt也支持 加载项 CONFIG += c++11 用法 [ capture ] ( parameters ) mutable -> return_ ...

  3. 01-RocketMQ介绍

    一.MQ介绍 1.什么是MQ?为什么要用MQ? MQ:MessageQueue,消息队列. 队列,是一种FIFO 先进先出的数据结构.消息由生产者发送到MQ进行排队,然后按原来的顺序交由消息的消费者进 ...

  4. go泛型教程

    泛型 原文 在线阅读 导读: 约束 使用方法 实现原理 跟其它语言的泛型进行对比 用例子学泛型 issues 泛型需满足 go1.18+ 约束 go使用interface作为约束,约束的意思是约束了这 ...

  5. Appium+ios环境搭建

    appium 环境搭建 安装homebrew(Mac OSX上的软件包管理工具) $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse ...

  6. JZ-064-滑动窗口的最大值

    滑动窗口的最大值 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值 ...

  7. C#-使用HttpListener创建http服务

    参考: c# 通过HttpListener创建HTTP服务 运行服务端程序,启动监听器httpobj.Start();时报错:System.Net.HttpListenerException: 'Ac ...

  8. Python 列表的(元素的删除)

    del:根据索引值删除元素 del 可以删除列表中的单个元素,格式为: del listname[index] 其中,listname 表示列表名称,index 表示元素的索引值.del 也可以删除中 ...

  9. JS-购物车

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 跨平台书签同步-Xmarks

    原文链接 Xmarks简介 Xmarks 是一款浏览器书签同步工具,它可以实现不同设备,不同浏览器之间的书签同步,并且是免费的. 有人会说,我们为什么需要一款专门的书签同步工具呢?Safari 自带的 ...