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= ...
随机推荐
- 什么是NFT?
我有一个年轻朋友,最近买了一个数字艺术品,9百多入手,几周后卖掉,赚了7万多,他告诉我这个东西叫NFT. 2021年twitter创始人杰克.多西将自己发布的第一条twitter通过NFT以250万美 ...
- 无法cin一个string 没有找到接受“std::string”类型的右操作数的运算符(或没有可接受的转换)
头文件#include<string>不能写成#include<string.h>
- 文件上传漏洞靶机upload-labs(1到10)
前言 项目地址:https://github.com/c0ny1/upload-labs pass-01(前端验证) 绕过方法:https://www.cnblogs.com/bk76120/p/12 ...
- Typora笔记上传到博客
Typora笔记上传到博客 Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版.它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML.PDF 以及本 ...
- [USACO20FEB]Equilateral Triangles P 题解
优雅的暴力. 设三个点为 \((i,j,k)\),则有 \(6\) 个未知数即 \(x_i,x_j,x_k,y_i,y_j,y_k\).又因为有 \(2\) 条关于这 \(6\) 个未知数的方程 \( ...
- cURL error 60: SSL certificate problem: unable to get local issuer certifica 解决
从 https://curl.haxx.se/docs/caextract.html 上下载cacert.pem 打开php.ini 搜索curl.cainfo 与 openssl.cafile,将 ...
- min_25 筛学习小记
min_25筛 由 dalao min_25 发明的筛子,据说时间复杂度是极其优秀的 \(O(\frac {n^{\frac 3 4}} {\log n})\),常数还小. 1. 质数 \(k\) 次 ...
- QQ密码防盗5招
第一招:复制粘贴防木马 每次登录QQ前,新建一个文本文件,并键入密码后复制,关闭文本文件后(不要保存)打开QQ,用"Ctrl+V"把密码粘贴到密码栏里,这样可以防范绝大部分的QQ木 ...
- Linux----虚拟机克隆、快照、删除、
克隆 已经安装一台linux系统 还想要更多的,直接克隆CentOS即可 使用vm ware 的克隆操作 注意: 使用前先关闭目前已开启的虚拟机 快照 作用: 虚拟系统出现异常,需要回到原先的状态,此 ...
- C++ struct结构体内存对齐
•小试牛刀 我们自定义两个结构体 A 和 B: struct A { char c1; char c2; int i; double d; }; struct B { char c1; int i; ...