jquery解决file上传图片+图片预览

js解决file上传图片+图片预览

demo案例中代码为js原生控制，可以根据项目的需求修改为jquery操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="photo">
<div id="click" style="width: 200px; height: 200px; border: 1px solid #000;"></div>
<script>
document.getElementById('photo').addEventListener('change',function(e){

var files = this.files;
var img = new Image();
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
var mb = (e.total/1024)/1024;
if(mb>= 2){
alert('文件大小大于2M');
return;
}
img.src = this.result;
img.style.width = "80%";
document.getElementById('click').style.width="200px";
document.getElementById('click').style.height="200px";
document.getElementById('click').innerHTML = '';
document.getElementById('click').appendChild(img);
}
});
</script>
</body>
</html>

前段时间修改bug 再次找到一个不错的方法：

//下面用于图片上传预览功能
function setImagePreview(objc) {
var docObj=document.getElementById(objc.file);
var imgObjPreview=document.getElementById(objc.pic);
if(docObj.files &&docObj.files[0]){
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = objc.width;
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
return true;
} else {
return false;
};
};

$("#file_pic").on("change",function(){
// 使用图片预览控件, opts 配置对象
var opts = {
　 file : 'file_pic',
　　 pic : 'file_view',
　　 width : '80px'
}
setImagePreview(opts);
})

jquery解决file上传图片+图片预览的更多相关文章

vue &lt&semi;input type=&quot&semi;file&quot&semi;&gt&semi;上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张参数名类型说明 fileTypes Array 文件类型, 默认 ...
input[type=&quot&semi;file&quot&semi;]的图片预览
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...
Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
jQuery实现鼠标经过图片预览大图效果
jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...
jquery 上传回显图片预览
/******************************************************************************* * 异步上传文件,兼容IE8,火狐和谷 ...
html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码上传图片验证 */ function submit_upload_picture() ...
一段上传图片预览JS脚本,Input file图片预览的实现
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...

随机推荐

帮我做个APP，给你20万，做不做？
一.为什么要写这篇文章前段时间,有个辞职创业的同事(做法务的) 问我开发一个新闻类的APP要多少钱,产品.UI.接口.后台管理页他们啥都没有,想全部外包. 我并没有在外包公司做过,也没 ...
Win7 64位 VS2015环境使用qt-msvc2015-5&period;6&period;0
QT下载 http://www.qt.io/download-open-source/#section-2 我用的是 qt-opensource-windows-x86-msvc2015-5.6.0. ...
Hashtable，HashMap，Dictionary的区别
Hashtable和HashMap的区别:1.Hashtable是基于Dictionary类的,HashMap是Java 1.2引进的Map接口的一个实现,c#中无HashMap2.Hashtable ...
redis学习-day1
1.nosql数据库的一种. 2.Redis 是一种开源的,先进的key-value存储.它通常被称为数据结构服务器.因为键可以包含字符串.哈希.链表.集合和有序集合. 特点: 3.为了保证效率,数据 ...
Android浏览图片，点击放大至全屏效果
做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Ac ...
Python3基础当函数中的局部变量与全局变量同名了，各管各的
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
YOLO2 (3) 快速训练自己的目标
1快速训练自己的目标在 YOLO2 (2) 测试自己的数据中记录了完整的训练自己数据的过程. 训练时目标只有一类 car. 如果已经执行过第一次训练,改过一次配置文件,之后仍然训练同样的目标还是只 ...
js函数 test&period;caller 谁在调用test函数
返回调用指定函数的函数. function test() { if (test.caller === null) console.log('test 函数在全局调用'); // 获取调用 test函数 ...
SGU---107 水题
题目链接: http://codeforces.com/problemsets/acmsguru/problem/99999/107 题目大意: 求n位数有多少个的平方末尾是987654321 思路: ...
微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.co ...