获取上传图片路径方法(新旧方法)

旧方法

//获取上传图片路径1
function fileComment(obj) {/*获取input=file图片路径*/var objUrl = getObjectURL(obj.files[0]);if (objUrl) {return objUrl;}
}
//获取上传图片路径2
function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;
}

新：FileReader：

自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里：FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

下面是使用FileReader进行图片预览的简单demo：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">
<script>var fileInput = document.querySelector('input[type=file]'),previewImg = document.querySelector('img');fileInput.addEventListener('change', function () {var file = this.files[0];var reader = new FileReader();// 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
      reader.addEventListener("load", function () {previewImg.src = reader.result;}, false);// 调用reader.readAsDataURL()方法，把图片转成base64
      reader.readAsDataURL(file);}, false);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/AaronNotes/p/6526479.html

获取上传图片路径方法(新旧方法)相关推荐

青龙面板获取京东ck的新老方法
ck的意思就是一个网页长久保留登入状态的秘诀,它一般可以保留十几天,因此获取ck应该选择一个最简单的方法. 咸鱼上一直有人再卖青龙坑位,有人问安不安全? 相对安全也不安全,就看咸鱼的卖家技术如何..他 ...
MAC怎么获取文件路径 MAC获取文件路径的四种方法
MAC怎么获取文件路径介绍方法一:最简单的方法右键文件或者文件夹,选择显示简介 2在弹出来的窗口中找到位置,即为路径,在mac 10.10之前的系统是正常的路径,10.10开始是小箭头代替/显示 ...
php 获取一串随机字符串,php获取随机字符串的几种方法
方法一:shuffle函数(打乱数组)和mt_rand函数(生成随机数,比rand速度快四倍) /** * 获得随机字符串 * @param $len 需要的长度 * @param $special ...
odoo10参考系列--ORM API 二（新旧API兼容性、模型参考和方法修饰符）
新API与旧API的兼容性现在的Odoo是从就的(不规律的)API过渡来的,它可能需要从一个手动桥接到另一个手动桥接: RPC层(XML-RPC和RPC)是在旧的API的形式表达,表达的纯粹的方法在 ...
java 获取包路径_java获取java文件路径的四种方法
java获取java文件路径的四种方法发布时间:2020-04-17 11:03:45 来源:亿速云阅读:750 作者:小新今天小编给大家分享的是java获取java文件路径的四种方法,很多人都 ...
vue中input获取文件路径_JS获取input file绝对路径的方法(推荐)
最近因需要上传文件到oracle blob里, 在获取文件路径的遇到些问题,由于安全原因,新版的浏览器都不支持直接获取本地URL,在网上找了些方法,如下: //FX获取文件路径方法 function ...
linux c 获取绝对路径各种方法分析
昨天肚腩群里有人问LINUX下C如何获取程序绝对路径.初看这问题,肚腩觉得很简单啊,就用getcwd或者argv[0]就可以了.写了个程序试试, #include <unistd.h>in ...
python获取绝对路径_python3中获取文件当前绝对路径的两种方法
方法1: import sys print(sys.argv) 得到文件当前绝对路径字符串的一个列表 ['D:/pycharm/PracticeProject/ClientServerNetworki ...
前端开发工具 vscode 使用技巧篇：控制台由powershell切换为cmd方法，windows下新旧版控制台cmd与powershell互切方法
vscode 控制台切换方法可以看到右上角是 powershell 不是 cmd. 通过 ctrl+shift+p,搜索出默认的 shell. 然后选择 cmd. 最后重启 vscode 就好了. ...

获取上传图片路径方法(新旧方法)

获取上传图片路径方法(新旧方法)相关推荐

最新文章

热门文章