jQuery Ajax上传文件
2017-11-16 本文已影响0人
胡自鲜
模拟前台html页面
1.jQuery插件AjaxFileUpload用来实现ajax文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="ajaxfileupload.js"></script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input id="img" type="file" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
</form>
<div id="showtext"></div>
<img src="" alt="" id="showImg"/>
<script type="text/javascript">
function ajaxFileUpload(){
$.ajaxFileUpload({
url:"upfile.php",
secureuri:false,
fileElementId:'img',
dataType: 'text',
processData:false,
success: function (data) {
document.getElementById('showImg').src=data;
}
})
return false;
}
</script>
</body>
</html>
2.通过jQuery Ajax使用FormData对象上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input id="img" type="file" name="img">
<input type="button" id="button" value="提交">
</form>
<img src="" id="tp"/>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$('#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;
}
})
})
</script>
</html>
后台PHP
<?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。 |
我的博客链接
更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
