IE8、firefox解决file组件上传照片的预览

    近日，项目中被测出bug，说google,ie8,firefox上传照片前，不能正常预览照片。 于是，想啊，找啊，得出一些信息，整理归纳如下：

    随着各浏览器版本的升级，对用户安全性要求，新的高版本浏览器都阻止读取客户本地路径。据说黑客会通过FireFox的这一安全隐患向服务器上传文件。
1、现况：解决了ie系列、firefox3浏览器的预览问题，
         Safari，google,Opera,暂时还没好的解决办法。
2.核心代码（原理参考：http://chenhua-1984.iteye.com/blog/405262）：
js部分：
－－－－－－－－－－－－－－－－－－－－－－－－
$("#uploadFile").change(function(){
var path = $(this).val();
var bgpath = '/jyimges/glzx/bgphoto.jpg';
if ($.trim(path).length <= 0) {
path = bgpath;
}else if(!checkPath(path)){
path = bgpath;
alert("您选择的上传文件格式不符合要求!<br/>请选择JPG、BMP或PNG格式的文件!",'','400px')
}

if($('#previewDiv')[0].filters) {
try{
$('#previewDiv').html('')[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}catch(e){
$('#uploadText').css('color','#666').html('');
try{
$('#previewDiv')[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = bgpath;
}catch(e1){}
}
}else{
if ($.browser.mozilla){
path= this.files[0].getAsDataURL(); //这是重点。此值是firefox过加密的，也只有由它可以解析
$('#previewDiv').html('<img src="'+path+'" width="100%"  height="100%"/>');
}else{
//随着浏览器对安全性要求的提高，暂对其他浏览器，无法处理。
}
}
});

html部分：
－－－－－－－－－－－－－－－－－－－－－－－－－
<input id="uploadFile" name="uploadFile" type="file" size="25"/>
<div class="userpicBox" id="previewDiv" tyle="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"></div>


3、firefox获取上传图片本地全路径。（项目暂时没这个，就用了上面说的.getAsDataURL()，放在这儿，作个参考）

   //简单方法
   function readFileFirefox(fileBrowser) {  
       try {    　　　　　　　
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
       } catch (e) {
return;  　　　
       }
       var fileName=fileBrowser.value;  
  　　 return fileName;
    }


//完整方法
function readFileFirefox(fileBrowser) {  
   try {  
        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
    } catch (e) {
//在firefox地址栏输入：about:config, 再打开页面（过滤器）中，添加：signed.applets.codebase_principal_support  。
        alert('Unable to access local files due to browser security settings. To overcome this, follow these steps: (1) Enter "about:config" in the URL field; (2) Right click and select New->Boolean; (3) Enter "signed.applets.codebase_principal_support" (without the quotes) as a new preference name; (4) Click OK and try loading the file again.');  
        return;  
    }  
 
    var fileName=fileBrowser.value;  
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);  
    try {  
        // Back slashes for windows  
        file.initWithPath( fileName.replace(/\//g, "\\\\") );  
    } catch(e) {  
        if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;  
        alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file.");  
        return;  
    }  
 
    if ( file.exists() == false ) {  
        alert("File '" + fileName + "' not found.");  
        return;  
    } 
    
   alert(file.path); // I test to get the local file's path.  
    var is = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance( Components.interfaces.nsIFileInputStream );  
    try {
    is.init( file,0x01, 00004, null);
    } catch (e) {  
        if (e.result!=Components.results.NS_ERROR_FILE_ACCESS_DENIED) throw e;  
        alert("Unable to access local file '" + fileName + "' because of file permissions. Make sure the file and/or parent directories are readable.");  
        return;  
    }  
    var sis = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance( Components.interfaces.nsIScriptableInputStream );  
    sis.init( is );  
    var data = sis.read( sis.available() );  
    alert("Data from file: " + data); // I test to get the local file's data.  
}

4、个人觉得最通用办法，是用ajax上传图片来预览。只是成本比较高，用户预览了照片，可能会选择放弃上传。这样，就还需要去删除之前的照片。成本太高，除非真的很变态，必需要预览。呵。


2011-2-24总结