<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文件上传图片本地预览的更多相关文章

  1. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  2. atitit.javascript js 上传文件的本地预览

    atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL  1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...

  3. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery实现上传图片本地预览效果

    html: <img id="pic" src="" ><input id="upload" name="fil ...

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

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

  7. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  8. IE8/9 本地预览上传图片

    本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...

  9. JS代码实用代码实例(输入框监听,点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. Matlab PCA 算法

    Matlab 自带PCA函数形式为 [mappedX, mapping] = pca(X, no_dims) 自己编写PCA函数的步骤 %第一步:输入样本矩阵%%%%%%%%%%%%%%%%%%%%% ...

  2. 分布式实时日志系统(二) 环境搭建之 flume 集群搭建/flume ng资料

    最近公司业务数据量越来越大,以前的基于消息队列的日志系统越来越难以满足目前的业务量,表现为消息积压,日志延迟,日志存储日期过短,所以,我们开始着手要重新设计这块,业界已经有了比较成熟的流程,即基于流式 ...

  3. 【前端积累】javascript事件

    什么是事件? 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信.就是文档或浏览器窗口发生的一些特定的交互瞬间(某种动作). 1.事件流 事件流描述的是从页面中接收事件的顺序. 1)事件 ...

  4. 【大数据系列】基于MapReduce的数据处理 SequenceFile序列化文件

    为键值对提供持久的数据结构 1.txt纯文本格式,若干行记录 2.SequenceFile key-value格式,若干行记录,类似于map 3.编写写入和读取的文件 package com.slp; ...

  5. LeetCode——Implement Trie (Prefix Tree)

    Description: Implement a trie with insert, search, and startsWith methods. Note:You may assume that ...

  6. How to install Wine on Ubuntu Linux 64bit

    参考地址:https://linuxconfig.org/how-to-install-wine-on-ubuntu-linux-64bit The following linux command p ...

  7. cmake编译android平台的libPoco

    1.下载源代码,解压到POCO-1.7.8-ALL 2.从$ANDROID_NDK\cmake下复制android.toolchain.cmake AndroidNdkGdb.cmake Androi ...

  8. [原]git的使用(六)---远程仓库

    10.远程仓库 -------------------------------------------------------------------------------------------- ...

  9. CentOS 配置Rails开发环境

    1 安装mysql yum install -y mysql mysql-server 启动mysql $ /etc/init.d/mysqld start 设置root密码,删除test数据库等 / ...

  10. css如何设置label的字间距

    css.html如何设置label的字间距 .myClass  label{ letter-spacing: 10px; } 如果label需要居中,需加上 text-indent: 10px; 首行 ...