jsアップロード画像のプレビュー

1553 ワード

最近のプロジェクトで使用した画像のアップロード前のプレビュー機能は、IE 6-9、FFに対応しています.

    <body>
            <input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">

プロジェクトには複数のアップロードボタンがありますので、ネット上の例に対していくつかの変更が必要です.実際にコードを使います.
function setImagePreview(fileObj,preview Obj,localImg)

var docObj=document.getElementById(fileObj);
var imgObjPreview=document.getElementById(previewObj);
if(docObj.files && docObj.files[0]){
    //   ，   img  
    imgObjPreview.style.display = 'block';
    imgObjPreview.style.width = '120px';
    imgObjPreview.style.height = '80px';
    //imgObjPreview.src = docObj.files[0].getAsDataURL();

    //  7          getAsDataURL()    ，        
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
    //IE ，    
    docObj.select();
    var imgSrc = document.selection.createRange().text;
    var localImagId = document.getElementById(localImg);
    //        
    localImagId.style.width = "120px";
    localImagId.style.height = "80px";
    //       ，             
    try{
        localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    }catch(e){
        alert("           ，     !");
        return false;
    }
    imgObjPreview.style.display = 'none';
    document.selection.empty();
}
return true;

)

javascriptの中で最もよく使われている継承パターンの組み合わせは継承されます.