纯粹AJAX上传图片到服务器端

时间: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表单中的所有参数传递到服务端。   但是上述方式,只能传递一般的参数, 上传文件的文件流是无法被序列化并传递的。 不过如今主流浏览器都开始支持一个叫做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数据改成流传输。
     formData.append("username", "zhuangzi");
    */
    /*
       方法 3:
    得到表单流数据对象
     var formData=new FormData($("form")[0]);
        需要额外添加数据:
       formData.append("username", "zhuangzi");  */
    	//向formData里增加数据
	     $.ajax({  
	          url: url,  
	          type: 'POST',  
	          data: formData,  
	          async: false,  
	          cache: false,  
	          contentType: false,  
	          processData: false,  
	          success: function () {
	          		//比如这里的可以把上传的图片url及上传文件名返回,
	          		//然后在这里显示预览功能,并隐藏保存文件名
	          		//方便与其它的表单字段一起上传
	          },  
	          error: function () {  
	             
	          }  
	     });
		})
})
</script>
这里要注意几点: processData设置为false。因为data值是FormData对象,不需要对数据做处理。


标签添加enctype="multipart/form-data"属性。



cache设置为false,上传文件不需要缓存。


contentType设置为false,不设置contentType值,因为是由表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。 





2. 服务器端接收代码





<?php
$username = $_POST["username"];
$files = $_FILES["files"];
//自行补齐其它的代码
 ?>