简单学会 ajax上传图片详细讲解(更换用户头像)

1：点击头像，调用标签<input type="file" name="file"  id="user"/>

2：平时我们正常ajax请求数据如下图

      假设我们的接口请求地址是    http:XXXXXXXXX?action=update_avatar&token=123

      data里面是我们要拼接到接口请求地址的参数。左边是参数右边是对应的值

3：而图片上传,你传的是一个file文件 而不再是普通的string类型，我们需要用到H5的FormData方法，同时在ajax中加上

     contentType : false,    //不设置Content-Type请求头

    processData : false,    // 不处理发送的数据

     假设上传头像的接口请求地址是

     http:XXXXXXXXX?action=update_avatar&token=123&__source="要上传的图片资源"

把图片资源跟参数__source存到formData中，其他参数直接拼接到地址进行请求

 或者把所有参数像__source一样，都存到formData中，这样就不用在地址后面拼接了，两种方法都是可以成功上传图片的

            	var toKen = "123";
            	
            	//点击input标签
	            $("#user").change(function() {
	            	
	            	var files = $("#user").get(0).files[0]; //获取file控件中的内容
	            	
	            	var reader = new FileReader();
	            	reader.readAsDataURL(files);
		            reader.onload = function(f) {
		                var result = document.getElementById("result");
		                //预览图片  
		                document.getElementById("tx_img").src = this.result;
		            }
		            
	            	var formData = new FormData();
	           		formData.append("__source", files);
	           		
		            $.ajax({
		                type:"POST",
		                url:"XXXXXXXXX?action=update_avatar&token="+toKen,//接口请求地址
		                contentType:false,
		                processData: false,
		                data:formData,
		                success:function(data){
		                	var data = JSON.parse(data);
					console.log("请求成功之后，调用接口返回的数据");
		                }
		            });
	           		
	             });