上傳圖片動態預覽(兼容主流瀏覽器)

lunaticf 發布于2019-08-21 12:01 / 481人閱讀

摘要：做這個功能初始目的是為了在提交編輯前先查看效果，當然僅限于圖片。核心代碼來源于網上，經測驗有效假設如下如下建立一個可存取到該的

做這個功能初始目的是為了在提交編輯前先查看效果，當然僅限于圖片。
核心代碼來源于網上，經測驗有效

假設HTML如下：

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 ;  
 }

GPU云服務器云服務器 php 預覽上傳圖片上傳圖片預覽php 通過瀏覽器預覽OSS中圖片圖片上傳服務器并預覽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87355.html

上傳圖片本地預覽效果實現（兼容IE8）

摘要：以上傳圖片為例。我們可以通過獲取上傳的圖片相關信息，但是想要實現本地預覽還需要借助來實現可以讀取本地圖片，并將圖片數據轉換成編碼的字符串形式嵌入到頁面中。在我們實現上傳圖片的效果里，就有用到。圖片預覽兼容處理及以下版本不支持和。最近項目里需要用到上傳圖片并預覽的功能，于是寫了個jQuery預覽圖片插件，下載地址。如果有需要的，可以直接下載。第一次寫jQuery插件，如有不對之處，歡迎...

avwu 2019-08-20 16:54 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

endiat 2019-08-26 10:14 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

mindwind 2019-08-02 15:35 評論0 收藏0
在Vue項目中使用WebUploader實現文件上傳

摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。簡介：WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的...

funnyZhang 2019-08-30 11:27 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

摘要：二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數據到服務器需要服務器支持我跳過了。數據主要來自拍攝的照片，多用于移動端開發，端也會用到，此插件兼容主流瀏覽器，以下不支持。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端...

lmxdawn 2019-08-26 10:31 評論0 收藏0