日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

純粹AJAX上傳圖片到服務(wù)器端

時間:2018-09-07 01:01:48 類型:JS/JQUERY
字號:    

Ajax的方式進行請求:

$.ajax({  
     url : "http://localhost:8080/STS/rest/user",  
     type : "POST",  
     data : $( '#postForm').serialize(),  
     success : function(data) {  
          $( '#serverResponse').html(data);  
     }
}); 

通常我們提交(使用submit button)時,會把form中的所有表格元素的name與value組成一個queryString,提交到后臺。這用jQuery的方法來說,就是serialize。 
通過 $( '#postForm' ).serialize() 可以對form表單進行序列化,從而將form表單中的所有參數(shù)傳遞到服務(wù)端。   但是上述方式,只能傳遞一般的參數(shù), 上傳文件的文件流是無法被序列化并傳遞的。 不過如今主流瀏覽器都開始支持一個叫做FormData的對象,有了這個FormData,我們就可以輕松地使用Ajax方式進行文件 上傳 了

1. 客戶端HTML代碼:

   

<script src="jquery-3.3.1.js"></script>
	<form id='forms'>
	    <input type="file" name="files" id="files" />
	</form>
	<script>
$(function($){
	$("#files").change(function(){
    var url =  "files.php";
   //方法1:
    var file_obj = document.getElementById('files').files[0];
    var formData = new FormData();
    formData.append('files',file_obj);
   /*
    方法 2:
   var formData = new FormData($("#forms")[0]); 
     //FormData 可以把post數(shù)據(jù)改成流傳輸。
     formData.append("username", "zhuangzi");
    */
    /*
       方法 3:
    得到表單流數(shù)據(jù)對象
     var formData=new FormData($("form")[0]);
        需要額外添加數(shù)據(jù):
       formData.append("username", "zhuangzi");  */
    	//向formData里增加數(shù)據(jù)
	     $.ajax({  
	          url: url,  
	          type: 'POST',  
	          data: formData,  
	          async: false,  
	          cache: false,  
	          contentType: false,  
	          processData: false,  
	          success: function () {
	          		//比如這里的可以把上傳的圖片url及上傳文件名返回,
	          		//然后在這里顯示預(yù)覽功能,并隱藏保存文件名
	          		//方便與其它的表單字段一起上傳
	          },  
	          error: function () {  
	             
	          }  
	     });
		})
})
</script>
這里要注意幾點: processData設(shè)置為false。因為data值是FormData對象,不需要對數(shù)據(jù)做處理。


標(biāo)簽添加enctype="multipart/form-data"屬性。



cache設(shè)置為false,上傳文件不需要緩存。


contentType設(shè)置為false,不設(shè)置contentType值,因為是由表單構(gòu)造的FormData對象,且已經(jīng)聲明了屬性enctype="multipart/form-data",所以這里設(shè)置為false。 





2. 服務(wù)器端接收代碼





<?php
$username = $_POST["username"];
$files = $_FILES["files"];
//自行補齊其它的代碼
 ?>