ajax實現附件上傳

標籤：style   blog   http   java   color   os   

利用FormData實現附件上傳(兩種方式)

1. var  reg=document.getElementById(’reg’);
2. var fd = new FormData(reg);
3. send(fd);   // fd裡邊有普通表單資訊和附件資訊

第二種方式

1. var mypic = document.getElementById(’myhead’).files[0];//擷取file表單的檔案對象
2. fd.append(’myhead’,mypic);
3. send(fd);

html5新標準，擷取附件資訊files，我們可以利用files擷取圖片的二進位資訊，實現選擇圖片檔案後立即在頁面顯示縮圖：

　　var mypic = document.getElementById(’myhead’).files[0];

　　document.images[0].src = window.URL.createObjectURL(mypic);//擷取image對象，將其src屬性更改為選擇的圖片的二進位資訊

 

選擇檔案頁面立即顯示縮圖，顯示上傳進度：

<script type="text/javascript">function f1(){var mypic = document.getElementById(‘myhead‘).files[0];//抓取頁面的附件資訊，實現上傳var fd = new FormData();fd.append("myhead",mypic);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4 && xhr.status==200){alert(xhr.responseText);}}//偵查當前附件上傳情況，用來處理上傳進度，顯示進度條xhr.upload.onprogress = function(evt){//偵查附件上傳情況//通過事件對象偵查//該匿名函數運算式大概0.05-0.1秒執行一次//console.log(evt);//console.log(evt.loaded);  //已經上傳大小情況//evt.total; 附件總大小var loaded = evt.loaded;var tot = evt.total;var per = Math.floor(100*loaded/tot);  //已經上傳的百分比var son =  document.getElementById(‘son‘);son.innerHTML = per+"%";son.style.width=per+"%";}xhr.open("post","./04.php");xhr.send(fd);}//立刻顯示被上傳的圖片function f2(){//利用files獲得被上傳附件(圖片)資訊var mypic = document.getElementById(‘myhead‘).files[0];//利用mypic獲得映像的url地址(二進位源碼)//URL  html5新標準屬性//window.URL.createObjectURL(mypic);document.getElementsByTagName(‘img‘)[0].src = window.URL.createObjectURL(mypic);}</script><style type="text/css">    #parent{width:550px; height:50px; border:5px solid blue;}    #son {width:0; height:100%; background-color:lightblue; text-align:center; line-height:50px; font-size:20px; font-weight:bold;}</style><div id="parent"><div id="son"></div></div><!--用來顯示上傳進度條-->帳戶圖片：<input type="file" id="myhead" name="myhead" onchange="f2()"/><br /><img src=""  width="200" height="150"/><br /><input type="button" value="上傳頭像" onclick="f1()" /><br />