inputfile美化及上传本地预览

  add.png

**********************************************************************************************************************

input file美化原理：将input file透明值设为0(opacity: 0;)，就不会显示，但是占据位置，可以相应操作，然后在它上面或下面放上美化的元素即可。

**********************************************************************************************************************

1. IE6可以使用value属性获取绝对路径
例：
 $("input[type = ‘file‘]").change(function () {
            var url= $(this).val();
 });

IE7 8本地可以获取地址，服务器只能获取名字，可以使用以下方式获取，支持IE6-8。
file.select();
url.src = document.selection.createRange().text;

2. 火狐和谷歌可以使用html5的File API中得FileReader获取本地路径

    readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
    readAsBinaryString(file)：将文件读取为二进制字符串
    readAsDataURL(file)：将文件读取为Data URL
    readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为‘UTF-8‘

   FileReader对象在读取文件后，还需要进行处理。为了不阻塞当前线程，API采用了事件模型，可以注册这些事件：

    onabort：中断时触发
    onerror：出错时触发
    onload：文件成功读取完毕时触发
    onloadend：文件读取完毕时触发，无论是否失败
    onloadstart：文件开始读取时触发
    onprogress：当文件读取时，周期性地触发

例：

 $("input[type = ‘file‘]").change(function () {
            var oFReader = new FileReader();
            var oFile = document.getElementById("file").files[0];

            oFReader.onload = function(e) {
                 document.getElementById("image").src = e.target.result;  /*不可传递给变量*/
            }
            
            oFReader.readAsDataURL(oFile);
   });

3. 谷歌可以使用window.webkitURL.createObjectURL(file.files[0])获取本地路径
例：
 $("input[type = ‘file‘]").change(function () {
            var docObj=document.getElementById("file");
            var imgurl= window.webkitURL.createObjectURL(docObj.files[0]);
 });

注： 2 3谷歌必须在服务器端才可有效果，2火狐本地可用。