1. 程式人生 > >form上傳檔案的兩種方式

form上傳檔案的兩種方式

示例1:

表單裡有圖片/檔案的上傳

<form enctype="multipart/form-data" method="post">

<input type="file" name="uploadfile"/>

</form>

multipart/form-data 是上傳二進位制資料
form裡面的input的值以2進位制的方式傳過去,所以這裡要明白,使用這種格式以後,後臺request就獲取不到資料了。

enctype屬性是設定提交資料的格式,指定將資料回發到伺服器時瀏覽器使用的編碼型別。

enctype值:

application/x-www-form-urlencoded:窗體資料被編碼為名稱/值對。這是標準(預設)的編碼格式。
multipart/form-data:窗體資料被編碼為一條訊息,頁上的每個控制元件對應訊息中的一個部分。

text/plain:窗體資料以純文字形式進行編碼,其中不含任何控制元件或格式字元

示例2:jquery ajax無重新整理上傳圖片

<form id='myupload' action='XXXXXXXXXXXX' method='post' enctype='multipart/form-data'>
<div class="demo">
<div class="btn">
    <span>新增附件</span>
    <input id="fileupload" type="file" name="file1">
</div> <div class="progress"> <span class="bar"></span><span class="percent">0%</span> </div> <!-- 顯示已上傳的檔名 --> <div class="files"></div> <!-- 顯示已上傳的圖片--> <div class="showimg"></div> </div> <input type="submit" onclick
="gosubmit2()"/>
</form> <script type="text/javascript" src="jquery-form.js"></script> <script type="text/javascript"> var bar = $('.bar');//進度條 var percent = $('.percent');//獲取上傳百分比 var showimg = $('.showimg');//顯示圖片的div var progress = $('.progress');//顯示進度的div var files = $('.files');//檔案上傳控制元件的input元素 var btn = $('.btn span'); //按鈕文字 function gosubmit2(){ $("#myupload").ajaxSubmit({ dataType :'json',//返回資料型別 beforeSend:function(){ showimg.empty(); progress.show(); var percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); btn.html('上傳中..'); }, //更新進度條事件處理程式碼 uploadProgress:function(event,position,total,percentComplete){ var percentVal = percentComplete + '%'; bar.width(percentVal); percent.html(percentVal); }, success:function(data){//圖片上傳成功時 //獲取伺服器端返回的檔案資料 alert(data.name+","+data.pic+","+data.size); }, error:function(xhr){ btn.html(上傳失敗); bar.width('0'); files.html(xhr.responseText); } }); } </script>