新聞中心
這篇文章主要講解了javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
墊江網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,墊江網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為墊江數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的墊江做網(wǎng)站的公司定做!
對于現(xiàn)代瀏覽器來說,要實(shí)現(xiàn)圖片預(yù)覽非常簡單:
1、fileReader.readAsDataURL(file)
2、window.URL.createObjectURL(file)
以上兩種方法分別可以得到一個base64和一個blob對象的URL地址,從而實(shí)現(xiàn)預(yù)覽。但是,他們只支持在IE10+,顯然這是不夠的,如何實(shí)現(xiàn)低版本IE瀏覽器的圖片預(yù)覽呢?代碼如下:
這樣,我們就能夠在IE10- 下預(yù)覽上傳的圖片了。
在這里,有必要對幾個參數(shù)說明一下,以免后人再入坑!
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled:可選。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
- true:默認(rèn)值。濾鏡激活。
- false:濾鏡被禁止。
sizingMethod:可選。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式。
- crop:剪切圖片以適應(yīng)對象尺寸。
- image:默認(rèn)值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸。
- scale:縮放圖片以適應(yīng)對象的尺寸邊界。
src:必選項(xiàng)。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數(shù),濾鏡將不會作用。
以上,可以實(shí)現(xiàn)低版本IE瀏覽器的圖片預(yù)覽,但要上傳到服務(wù)器還需要一番周折。對于單張圖片,可以通過表單提交,但對于多張圖片,這需要flash技術(shù)的支持,實(shí)現(xiàn)起來相當(dāng)麻煩。
這里,樓主推薦一個現(xiàn)有的輪子:webuploader 組件。
看完上述內(nèi)容,是不是對javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文題目:javascript如何實(shí)現(xiàn)圖片預(yù)覽和上傳功能
標(biāo)題來源:http://www.ef60e0e.cn/article/gehopd.html