上傳圖檔表單file之我的了解

前段時間做到上傳圖檔的功能，雖然是個小例子，但是我覺得有必要分享一下我的心得和體會，以供大家參考借鑒。好了，廢話不多說，上代碼。

HTML：

//按鈕部分
<a href="javaScript:;"><input type="file" name="" id="" value="" onchange="getImgURL(this)"/></a>

//輸入框部分
<div class="textarea" contenteditable="true"  name="content">推薦理由</div>
           

CSS：

footer a{
    width: %;
    height: rem;
    display: block;
    border-top: px solid #E6E6E6;
    float: left;
    background: white;
}
footer a:nth-of-type(1){
    border-right: px solid #E6E6E6;
    background: url(../image/camera.png) no-repeat center center;
    background-size: rem rem;
}
footer input{
    width: %;
    height: rem;
    opacity: ;
}
           

這裡我重點說一下input中file的樣式美化。因為file自帶文字和按鈕，看起來非常難看，那我們怎麼做呢？我們給input設定透明度為‘0’!,讓它“消失”，寬度和外面的a标簽是一樣的，都是100%，然後給外面的a标簽添加背景圖，這樣的話就隻有圖示了，進而達到美化的效果。接下來我們說說js

JS：

//擷取圖檔連結
function getImgURL(node) {    
    var imgURL = "";      
    try{     
        var file = null;  
        if(node.files && node.files[] ){  
            file = node.files[];   
        }else if(node.files && node.files.item()) {                                  
            file = node.files.item();     
        }     
        //Firefox 因安全性問題已無法直接通過input[file].value 擷取完整的檔案路徑  
        try{  
            //Firefox7.0   
            imgURL =  file.getAsDataURL();    
            //alert("//Firefox7.0"+imgRUL);                           
        }catch(e){  
            //Firefox8.0以上                                
            imgRUL = window.URL.createObjectURL(file);  
            //alert("//Firefox8.0以上"+imgRUL);  
        }  
     }catch(e){      //這裡不知道怎麼處理了，如果是遨遊的話會報這個異常                   
        //支援html5的浏覽器,比如高版本的firefox、chrome、ie10  
        if (node.files && node.files[]) {                            
            var reader = new FileReader();   
            reader.onload = function (e) {                                        
                imgURL = e.target.result;    
            };  
            reader.readAsDataURL(node.files[]);   
        }    
     }   
    creatImg(imgRUL);  
    return imgURL;  
}  

//生成img标簽
function creatImg(imgRUL){   //根據指定URL建立一個Img對象  
    var textHtml = "<img src='"+imgRUL+"'/>";  
    $(".textarea").append(textHtml);  
}  

整體思路：點選上傳按鈕的時候，擷取本地圖檔的url，然後在輸入框中生成img标簽。
此處使用的輸入框是contenteditable="true"屬性的輸入框代替textarea。
           

eg：

Tips：如果作者的文章有幫到你，請你不要嫌麻煩，登入賬号給作者留一句言，也是對作者的成果的肯定。謝謝。有不足的地方希望能夠指出來，共同進步。