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 再次找到一个不错的方法：
<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上传图片+图片预览的更多相关文章
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- jquery+html5+canvas实现图片 预览 压缩 上传
javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...
- input[type="file"]的图片预览
在项目中遇到用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上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...
随机推荐
- 对象扩展运算符（…）与rest运算符
对象扩展运算符(…) 当编写一个方法时,我们允许它传入的参数是不确定的.这时候可以使用对象扩展运算符来作参数,看一个简单的列子: function xzdemo(...arg){ console.lo ...
- Redis 应用：缓存
使用Redis做预定库存缓存功能 缓存是在业务层做的,准确讲应该是在MVC模型中Model的ORM里面 PHP项目的缓存从以前的APC缓存逐渐切换到Redis中,并且根据Redis所支持的数据结构做了 ...
- Codeforces Round #332 (Div. 2) D. Spongebob and Squares（枚举）
http://codeforces.com/problemset/problem/599/D 题意:给出一个数x,问你有多少个n*m的网格中有x个正方形,输出n和m的值. 思路: 易得公式为:$\su ...
- 在Idea创建Spring Boot + MyBatis的web项目
创建步骤如下 选择Spring initializr 2. 修改group 与 atifact id,点击next 3. dependencies里面选择Web->Web , SQL -> ...
- springboot读取properties（yml）的几种常用方式
boot项目中一些秘钥等不常变动的信息大多存储在配置文件中,那么我们怎么获取配置文件中的属性呢? 以获取server端口号为例讲解几种方法:配置信息如下 一:使用@Value注解 @Value(&qu ...
- pymongo.errors.OperationFailure: Authentication failed.
mongoDB有不同的认证机制,3.0版本以后采用的是'MONGODB-CR', 之前的版本采用的是'MONGODB-CR'. 所以,以我的版本情况,显然应该用'SCRAM-SHA-1' from p ...
- Promise的.then .catch
定义一个promise 调用promise 如果promise的状态为resolve 则 执行 .then 否则执行.catch 可以有多个.then 会按顺序执行 axios.post 可 ...
- Grunt、Gulp区别 webpack、 requirejs区别
1. 书写方式 grunt 运用配置的思想来写打包脚本,一切皆配置,所以会出现比较多的配置项,诸如option,src,dest等等.而且不同的插件可能会有自己扩展字段,导致认知成本的提高,运用的时候 ...
- Gradle实现编译差异
今天开发组长问了这么一个问题,如何实现通过gradle编译动态设置代码里的一些值.可能这么说不太明白,下面说依稀具体需求. 开发中有两个服务器:一个用于测试版本.一个用于线上版本发布,这两个服务器地址 ...
- 贪心 —— 今年暑假不AC
贪心基本题, 有助于理解贪心算法的思想 #include <cstdio> #include <algorithm> using namespace std; struct P ...