jq ajax异步上传文件,jQuery Ajax上传文件

模拟前台html页面

1.jQuery插件AjaxFileUpload用来实现ajax文件上传

Upload

function ajaxFileUpload(){

$.ajaxFileUpload({

url:"upfile.php",

secureuri:false,

fileElementId:'img',

dataType: 'text',

processData:false,

success: function (data) {

document.getElementById('showImg').src=data;

}

})

return false;

}

2.通过jQuery Ajax使用FormData对象上传文件

$('#button').click(function(){

console.log("111111")

var formData = new FormData();

formData.append("img",document.getElementById('img').files[0]);

console.log(formData);

$.ajax({

type:"post",

url:"upfile.php",

//异步

async:true,

data:formData,

//processData 默认为false，当设置为true的时候,jquery ajax

//Jquery是否对你的数据进行预处理

processData:false,

//Jquery不要修改请求内容类型

contentType:false,

success:function(data){

console.log(data);

document.getElementById('tp').src = data;

}

})

})

后台PHP

if(!empty($_FILES)){

move_uploaded_file($_FILES['img']['tmp_name'],$_FILES['img']['name']);

echo $_FILES['img']['name'];

}else{

echo "error";

}

?>

jQery Ajax参数

参数名

类型

描述

url

string

(默认: 当前页地址) 发送请求的地址

type

String

(默认: "GET") 请求方式 ("POST" 或 "GET")，

默认为 "GET"。

async

Boolean

(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

contentType

String

告诉服务器从浏览器提交过来的数据格式。

dataType

String

告诉服务器浏览器可以想要返回的数据格式类型，同时JQuery也会根据该类型对返回的数据进行处理,类型:

"xml" : 返回 XML 文档，可用 jQuery 处理。

"html" : 返回纯文本 HTML 信息；包含 script 元素

"script" : 返回纯文本 JavaScript 代码。不会自动缓存结果

"json": 返回 JSON 数据 。JQuery将返回的字符串格式数据自动转化为Javascript对象，便于直接使用obj.property格式访问

processData

Boolean

(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。