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 再次找到一个不错的方法：

<img alt="" src="${notice.url}" style="width:80px;" id="file_view">
<input type="file" class="filestyle" name="url" id="file_pic"/>

//下面用于图片上传预览功能
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上传图片+图片预览的更多相关文章

  1. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  2. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  3. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

  4. Jquery OR Js 实现图片预览

    Jquery方法一: <!DOCTYPE html> <html> <head>     <title></title>     <s ...

  5. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  6. jquery 上传回显图片预览

    /******************************************************************************* * 异步上传文件,兼容IE8,火狐和谷 ...

  7. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  8. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  9. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

随机推荐

  1. dRMT: Disaggregated Programmable Switching, SIGCOMM17

    Reference: dRMT, SIGCOMM 2017 今年的SIGCOMM17会议上,Cisco System和MIT的团队针对RMT模型现有的问题,合作发表了这篇"dRMT: Dis ...

  2. HDU 2426 Interesting Housing Problem（二分图最佳匹配）

    http://acm.hdu.edu.cn/showproblem.php?pid=2426 题意:每n个学生和m个房间,现在要为每个学生安排一个房间居住,每个学生对于一些房间有一些满意度,如果满意度 ...

  3. HDU 6249 Alice’s Stamps（dp）

    http://acm.hdu.edu.cn/showproblem.php?pid=6249 题意: 给出n个区间,求选k个区间的最大区间并. 思路: 可能存在左端点相同的多个区间,那么此时我们肯定选 ...

  4. BZOJ 1064: [Noi2008]假面舞会（dfs + 图论好题！）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1064 题意: 思路: 考虑以下几种情况: ①无环并且是树: 无环的话就是树结构了,树结构的话想一下就 ...

  5. windows 7 系统下，用户每次登录都是以临时配置文件的形式存在于users文件夹下

    windows 7 系统下,用户每次登录都是以临时配置文件的形式存在于users文件夹下 当用户登录系统后,在users文件夹下创建的是一个临时文件夹,如果当前用户log off,那么当前用户的所有设 ...

  6. C# winform窗体间传值(使用委托或事件)

    窗体间传值 今天得空,刚好看到网上好多人再找winform窗体间传值的问题,由于昨天项目的优化的感觉不错,就写了个C# winform窗体间传值的demo,希望能给需要的人的带来帮助: 工程的源代码地 ...

  7. Java只给汉字转URLEncoder

    public static String encode(String str, String charset) throws UnsupportedEncodingException { Patter ...

  8. 如何用conda安装软件|处理conda安装工具的动态库问题

    conda的确是一个非常好的工具,对于初学者而言,安装软件就跟用XXX软件管理器一样方便.正因为他如此便利,以至于我介绍如何手动安装工具时,总有人问我为啥不用conda. 我用conda,并且用的很好 ...

  9. 串口.Qt532测试（同步）

    环境:Win7x64.Qt5.3.2 MSVC OpenGL(x86).vs2010(x86) ZC:这里的例子是 同步的函数操作,貌似 如果子线程在等待 WaitCommEvent(...)或Rea ...

  10. eclipse安装失败

    在eclipse下载后第一次运行eclipse出现如下错误,刚打开后就退出并返回code=13,最后发现 是eclipse的安装版本是64bit,但是jdk的版本是基于32bit的所以出现上面的错误, ...