form上傳檔案的兩種方式
阿新 • • 發佈:2018-12-27
示例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>