javascript預(yù)覽上傳圖片發(fā)現(xiàn)的問題的解決方法
更新時(shí)間:2010年11月25日 19:59:32 作者:
前段時(shí)間做一個(gè)行業(yè)站點(diǎn),其中商鋪有一塊功能是商鋪設(shè)置功能,要求是進(jìn)行版式,企業(yè)名稱,企業(yè)頭部LOGO,企業(yè)頭部背景進(jìn)行自定義設(shè)置。
先看看效果圖吧:

機(jī)會(huì)難得,有點(diǎn)技術(shù)亮點(diǎn),就一下子投入到功能開發(fā)中去了。在這一塊的功能開發(fā)中,自己還是學(xué)到些不錯(cuò)的東西,其中一點(diǎn)就是,用戶選擇上傳的圖片,如何預(yù)覽出來呢。網(wǎng)上找了些資料,最終采用如下方法:
function (obj) { //logo上傳添加事件
var logoimg = null;
if (document.all) {//如果是IE情況下
obj.select();
logoimg = document.selection.createRange().text;
//由于是采用濾鏡的方式,所以要把圖片設(shè)置為不可見,在圖片外層的DIV上面設(shè)置濾鏡效果
$(".setup_logo_left img").removeAttr("src");
$(".setup_logo_left img").css("display", "none");
var img = document.getElementById("preview_fake");
img.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = logoimg;
return;
}
logoimg = obj.files[0].getAsDataURL();
$(".setup_logo_left img").attr("src", logoimg);
}
效果很不錯(cuò),在IE6,IE7,IE8,FOX,哦還有一個(gè)特讓人糾結(jié)的360都正常顯示

機(jī)會(huì)難得,有點(diǎn)技術(shù)亮點(diǎn),就一下子投入到功能開發(fā)中去了。在這一塊的功能開發(fā)中,自己還是學(xué)到些不錯(cuò)的東西,其中一點(diǎn)就是,用戶選擇上傳的圖片,如何預(yù)覽出來呢。網(wǎng)上找了些資料,最終采用如下方法:
復(fù)制代碼 代碼如下:
function (obj) { //logo上傳添加事件
var logoimg = null;
if (document.all) {//如果是IE情況下
obj.select();
logoimg = document.selection.createRange().text;
//由于是采用濾鏡的方式,所以要把圖片設(shè)置為不可見,在圖片外層的DIV上面設(shè)置濾鏡效果
$(".setup_logo_left img").removeAttr("src");
$(".setup_logo_left img").css("display", "none");
var img = document.getElementById("preview_fake");
img.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = logoimg;
return;
}
logoimg = obj.files[0].getAsDataURL();
$(".setup_logo_left img").attr("src", logoimg);
}
效果很不錯(cuò),在IE6,IE7,IE8,FOX,哦還有一個(gè)特讓人糾結(jié)的360都正常顯示
您可能感興趣的文章:
- javascript 控制圖片播放代碼
- javascript感應(yīng)鼠標(biāo)圖片透明度顯示的方法
- JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法
- javascript修改圖片src的方法
- 原生javaScript實(shí)現(xiàn)圖片延時(shí)加載的方法
- javascript預(yù)加載圖片、css、js的方法示例介紹
- javascript動(dòng)態(tài)改變img的src屬性圖片不顯示的解決方法
- javascript firefox不顯示本地預(yù)覽圖片問題的解決方法
- javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
相關(guān)文章
jb51站長(zhǎng)推薦的用js實(shí)現(xiàn)的多瀏覽器支持的圖片輪換展示效果ie,firefox
jb51站長(zhǎng)推薦的用js實(shí)現(xiàn)的多瀏覽器支持的圖片輪換展示效果ie,firefox...2007-03-03非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
一個(gè)效果如果沒有一個(gè)合理的布局,是很難作出來的,所以布局是非常重要的基礎(chǔ)! 下邊的效果,是試著假設(shè)在布局我無法改的情況下,能過外邊的CSS或Javascript來實(shí)現(xiàn)一個(gè)滑動(dòng)圖片效果!2009-04-04javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般頁面的的圖片為了布局考慮,顯示大小都小于實(shí)際大小。 鼠標(biāo)在圖片上移動(dòng)時(shí),在旁邊展示一個(gè)跟此圖片顯示大小一樣的層。并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個(gè)層中。2009-04-04發(fā)一個(gè)自己用JS寫的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來照顧一下博客吧,這里先把眼前就有的一個(gè)小東西拿出來和大家分享一下,這是2006年的時(shí)候(文本里記下了時(shí)間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07JavaScript判斷圖片是否能夠加載,失敗則替換默認(rèn)圖片
JavaScript智能判斷圖片是否能夠正確加載,若加載失敗則用默認(rèn)圖片替換,這是個(gè)比較實(shí)用的功能,不少網(wǎng)站都可見到這種功能.2010-10-10