成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

上傳圖片動(dòng)態(tài)預(yù)覽(兼容主流瀏覽器)

lunaticf / 532人閱讀

摘要：做這個(gè)功能初始目的是為了在提交編輯前先查看效果，當(dāng)然僅限于圖片。核心代碼來源于網(wǎng)上，經(jīng)測(cè)驗(yàn)有效假設(shè)如下如下建立一個(gè)可存取到該的

做這個(gè)功能初始目的是為了在提交編輯前先查看效果，當(dāng)然僅限于圖片。
核心代碼來源于網(wǎng)上，經(jīng)測(cè)驗(yàn)有效

假設(shè)HTML如下：

JS如下：

document.getElementById("upload").onchange = function(){  
    var objUrl = getObjectURL(this.files[0]) ;  
    if (objUrl) {  
        document.getElementById("logo").setAttribute("src", objUrl) ;  
    }  
};  
//建立一個(gè)可存取到該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 ;  
 }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87355.html

相關(guān)文章

  • 上傳圖片本地預(yù)覽效果實(shí)現(xiàn)（兼容IE8）

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

    avwu 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    mindwind 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    endiat 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳

    摘要：簡(jiǎn)介是由團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。 簡(jiǎn)介：WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來的...

    funnyZhang 評(píng)論0 收藏0

  • 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(六) ----- 圖片上傳,旋轉(zhuǎn),重繪,預(yù)覽等實(shí)戰(zhàn)(附DEMO)

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

    lmxdawn 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<