获取上传图片路径方法(新旧方法)
生活随笔
收集整理的這篇文章主要介紹了
获取上传图片路径方法(新旧方法)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
舊方法
//獲取上傳圖片路徑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對象以后，預(yù)覽圖片變得簡單多了，不再需要后臺的配合，并且JS操作本地文件已經(jīng)成為了可能。這種方法的思路是：通過FileReader.prototype.readAsDataURL()方法把圖片文件轉(zhuǎn)成base64編碼，然后把base64編碼替換到預(yù)覽圖片的src屬性即可。如果想要了解更多關(guān)于FileReader對象的，可以看一下這里：FileReader?https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 下面是使用FileReader進行圖片預(yù)覽的簡單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();// 監(jiān)聽reader對象的的onload事件，當圖片加載完成時，把base64編碼賦值給預(yù)覽圖片 reader.addEventListener("load", function () {previewImg.src = reader.result;}, false);// 調(diào)用reader.readAsDataURL()方法，把圖片轉(zhuǎn)成base64 reader.readAsDataURL(file);}, false); </script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/AaronNotes/p/6526479.html
總結(jié)
以上是生活随笔為你收集整理的获取上传图片路径方法(新旧方法)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
