图片上传前的预览

   在上传图片的时候，我们通常想在上传前预览下要上传的图片。

   要怎么实现呢，我们通常只要获得图片在浏览器中的显示地址就可以再上传前先浏览要上传的图片了。

   那要怎么获得上传前图片在浏览器中显示的url呢。

   在Firefox下可通过下面函数获取图片地址

function ffGetLocalImgUrl(){   
    var objImgs = $("input[type=file]");
    var i=0;
    var imgSrc = new Object();
    var file = '';
    for(i=0;i<3;i++){
        file = objImgs[i].files && objImgs[i].files[0];
        if(file){
            imgSrc[i] = file.getAsDataURL();
        }else{
            imgSrc[i] = null;
        }
       
    }
    return imgSrc;
}

   在ie下可通过下面函数获取图片地址

function ieGetLocalImgUrl(){
    var objImgs = $("input[type=file]");
    var i=0;
    var imgSrc = new Object();
    var src = '';
    var file = '';
    for(i=0;i<3;i++){
        src = objImgs[i].value && objImgs[i].value;   
        if(src){
            imgSrc[i] = src;
        }else{
            imgSrc[i] = null;
        }
       
    }
    return imgSrc;   
}

 

然后把获得图片地址添加到img标签的src属性中就可以查看了。

 

参考地址：http://code.google.com/p/image-upload-preview/

Demo地址：http://hedgerwow.appspot.com/image-upload-preview/demo.html