javascript預(yù)覽上傳圖片發(fā)現(xiàn)的問題的解決方法
更新時間：2010年11月25日 19:59:32 作者：
前段時間做一個行業(yè)站點，其中商鋪有一塊功能是商鋪設(shè)置功能，要求是進行版式，企業(yè)名稱，企業(yè)頭部LOGO，企業(yè)頭部背景進行自定義設(shè)置。
先看看效果圖吧：
機會難得，有點技術(shù)亮點，就一下子投入到功能開發(fā)中去了。在這一塊的功能開發(fā)中，自己還是學到些不錯的東西，其中一點就是，用戶選擇上傳的圖片，如何預(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);
}
效果很不錯，在IE6，IE7，IE8,FOX,哦還有一個特讓人糾結(jié)的360都正常顯示
機會難得，有點技術(shù)亮點，就一下子投入到功能開發(fā)中去了。在這一塊的功能開發(fā)中，自己還是學到些不錯的東西，其中一點就是，用戶選擇上傳的圖片，如何預(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);
}
效果很不錯，在IE6，IE7，IE8,FOX,哦還有一個特讓人糾結(jié)的360都正常顯示
相關(guān)文章
閑得無聊，弄了個抖動效果，大家看看有沒有值得學習地方2012-01-01
圖片減速度滾動,一般用于產(chǎn)品的展示效果。作為前端，互聯(lián)網(wǎng)上一些常見效果都要嘗試去實現(xiàn)，不能因為公司用不到就不做。2011-12-12
用javascript實現(xiàn)旋轉(zhuǎn)圖片效果的代碼
用javascript實現(xiàn)旋轉(zhuǎn)圖片效果的代碼...2007-11-11
人人網(wǎng)相冊和酷狗音樂網(wǎng)站上面當鼠標移動到圖片上面，鼠標的形狀會根據(jù)其在圖片上的位置改變。2010-03-03
不間斷的圖片滾動效果實現(xiàn)代碼。2010-01-01
js document.images獲取頁面中的所以圖片并顯示出來2008-05-05
一個不錯的給圖片添加說明文字的動態(tài)層的實現(xiàn)代碼
一個不錯的給圖片添加說明文字的動態(tài)層的實現(xiàn)代碼，需要的朋友可以參考下2013-04-04
javascript橢圓旋轉(zhuǎn)相冊實現(xiàn)代碼
支持自動和手動兩種模式：自動模式下自動旋轉(zhuǎn)展示，手動模式下通過鼠標選擇當前圖片，或通過提供的接口選擇上一張/下一張圖片2012-01-01
鼠標放上去圖片明亮顯示，不錯的js效果2008-05-05
2007-12-12