input标签file文件上传图片本地预览
<input type="file" name="img-up" id="img-up" value="" />
$("#img-up").on("change",function () {
if(this.files[0]){
getImgBase64Data(this.files[0], function (result) {
console.log(result); });
} });
function getImgBase64Data(file, callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(file); // 读取完后会调用onload方法
}
方法二:
//取得该文件的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
将base64的图片,转换回 file 对象
// base 64 转 blob
let dataURLtoFile = function (b64Data,filename) {
filename = filename || "test.png";
let mime = "image/png";
var bstr = atob(b64Data.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
//转换成file对象
return new File([u8arr], filename, {type:mime});
//转换成成blob对象
//return new Blob([u8arr],{type:mime});
return blob; }
input标签file文件上传图片本地预览的更多相关文章
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html input type=file 选择图片,图片预览 纯html js实现图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现上传图片本地预览效果
html: <img id="pic" src="" ><input id="upload" name="fil ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)
前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...
随机推荐
- html2canvas - 项目中遇到的那些坑点汇总(更新中...)
截图模糊 原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...
- SVN —— 如何设置代理
如果在使用SVN下载外网的资源时,出现这样的提示:No such host is known. 或者 不知道这样的主机,可能是机器网络的问题. 如果浏览器能够正常访问外网,那应该是网络设置了代理的问题 ...
- 流程图 --- BPMN规范简介
BPMN 目前 是2.0规范 http://www.bpmn.org/ BPMN Quick Guide http://blog.csdn.net/flygoa/article/details/5 ...
- C# 未能加载文件或程序集“xxx”或它的某一个依赖项。参数错误。(异常来自 HRESULT:0x80070057 (E_INVALIDARG))
错误信息: 因为电脑突然蓝屏,然后重启,再运行项目,报了这个错. 解决方案: 环境是:VS2012+Win7 通过网上查找, 4.0 删除 C:\Windows\Microsoft.NET\Frame ...
- Spring Framework核心概念之Bean生命周期管理
目录 Spring Bean的生命周期 相关接口的分类 测试SpringBean生命周期的Demo程序 小结 Spring Bean的生命周期 Spring容器既Application或者WebApp ...
- 力推:无限制下载神器aria2
百度网盘是一个非常方便的存储以及寻找资源的好帮手,但是百度为了挣钱把非会员的下载网速一再限制(无力吐槽),还还好一直使用油猴插件加idm下载神器来下载百度云文件.奈何idm对bt种子文件不支持下载,终 ...
- redux+react-redux+示例的快速上手体验
刚学习redux的同学提供一些可供参考的例子. 之前用vue用了很久 vue的语法糖用起来是真的舒服 react 其实毕竟他们都是类似的框架, 虽然语法大不同, 但是有些地方的思想还是很像的, 废话 ...
- eclipse maven build、maven clean、maven install和maven test的区别 精析
1.情景展示 选中maven项目,右键-->Run As或Debug As-->maven buid,maven install,maven test有什么区别? 2.区别说明 ...
- Centos7网桥配置
CentOS 的网桥虽然配置了很多次,不过总是记不住那几条,还是简单记录下,增加网桥可以通过brctl命令,但是为了简便快捷,直接生成配置文件即可 1.在/etc/sysconfig/network- ...
- 你可能用得到的9段CSS代码
一.opacity兼容 .transparent { filter: alpha(opacity=50);/* internet explorer */ -khtml-opacity: 0 ...