旧方法
//获取上传图片路径1function fileComment(obj) { /*获取input=file图片路径*/ var objUrl = getobjectURL(obj.files[0]); if (objUrl) { return objUrl; }}获取上传图片路径2 getobjectURL(file) { var url = null; if (window.createObjectURL != undefined) { basic url = window.createObjectURL(file); } else if (window.URL != undefined) { mozilla(firefox) url = window.URL.createObjectURL(file); } if (window.webkitURL != undefined) { webkit or Chrome url = window.webkitURL.createObjectURL(file); } 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</bodyinput type="file"><brimg src="" height="200" alt="Image prevIEw area..." Title="prevIEw-img"script> var fileinput = document.querySelector('input[type=file]),prevIEwimg img); fileinput.addEventListener(change,function () { file = this.files[0]; reader new fileReader(); // 监听reader对象的的onload事件,当图片加载完成时,把base64编码賦值给预览图片 reader.addEventListener("load () { prevIEwimg.src reader.result; },1)">false); 调用reader.readAsDataURL()方法,把图片转成base64 reader.readAsDataURL(file); },1)">);HTML>
总结
以上是内存溢出为你收集整理的获取上传图片路径方法(新旧方法)全部内容,希望文章能够帮你解决获取上传图片路径方法(新旧方法)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)