利用FormData實現附件上傳(實現上傳圖片顯示)

<script type="text/javascript">
            function  creatXMLHttpRequest(){
                    var obj =null;
                                if(window.ActiveObject){
                                        obj = new ActiveObject("Microsoft.XMLHTTP");
                                }else{
                                        obj = new XMLHttpRequest();
                                }
                            return obj;
                }
    
            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            }
            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }
 </script> 

                <input type="file" id='myheads' name="myhead"  value="wenjian"/>
                <input type="button"  value="上傳" onclick="uploaded();"/>
 </body>

上圖爲fileinfo的內容

當即顯示被上傳圖片效果

            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            //    console.log(fileinfo);
            }

            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    document.getElementById('img').src=window.URL.createObjectURL(fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }

總結:HTML5新特性FormData

能夠經過:

fileinfo=document.getElementById('myheads').files[0];來捕獲客戶端上傳文件的信息

將須要上傳的文件信息載入到FormData對象內部

fd.append('finfo',fileinfo);

而後經過 window.URL.createObjectURL(fileinfo);文件的url地址信息，二進制編碼存在