模拟前台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。
