上传图片动态预览(兼容主流浏览器)
生活随笔
收集整理的這篇文章主要介紹了
上传图片动态预览(兼容主流浏览器)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
做這個功能初始目的是為了在提交編輯前先查看效果，當然僅限于圖片。
核心代碼來源于網上，經測驗有效
假設HTML如下：
<body> <img src="#" id="logo" alt="上傳的圖片"> <input type="file" accept="image/*" id="upload" /> </body>JS如下：
document.getElementById("upload").onchange = function(){ var objUrl = getObjectURL(this.files[0]) ; if (objUrl) { document.getElementById("logo").setAttribute("src", objUrl) ; } }; //建立一個可存取到該file的url function 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) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; }總結
以上是生活随笔為你收集整理的上传图片动态预览(兼容主流浏览器)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用vue.js写的一个瀑布流的组件
- 下一篇： C# foreach循环较for循环的优