input标签file文件上传图片本地预览(转载)
2024-10-21 02:57:47
<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; }
文章转自于 https://www.cnblogs.com/muamaker/p/6758219.html
最新文章
- espcms列表页ajax无限加载
- 如何给开源的DUILib支持Accessibility
- 详解 Spring 3.0 基于 Annotation 的依赖注入实现(转)
- java的加减乘除
- 使APP消除上方手机消息提示栏(显示WIFI,信号格那栏)消失的方法
- Samsung K9F1G08U0D SLC NAND FLASH简介(待整理)
- JS放大镜特效(兼容版)
- 获取checked的值
- 将node.js程序作为服务,并在windows下开机自动启动(使用forever)
- [知了堂学习笔记]_JSON数据操作第1讲(初识JSON)
- 反射结合xml简单的模拟spring创建bean
- 流程控制之while循环
- C#通过虚方法实现方法重写—多态。
- Laravel: 基础篇
- php 根据日期获取星座
- PowerDesigner V16.5 安装教程以及汉化(数据库建模)
- java登录怎么做
- (zhuan) Variational Autoencoder: Intuition and Implementation
- jquery左侧菜单
- 69.查看APP沙盒缓存的内容文件