Ajax无刷新图片上传

版权声明:本文为博主寕王原创文章,未经博主允许不得转载。 https://blog.csdn.net/nw_ningwang/article/details/78350430

最近做聊天项目,由于聊天过程中需要发送图片,采用了Ajax上传图片,以便本页面能够直接使用,特在此处留作笔记,供大家参考。

前台Ajax上传

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Ajax异步上传</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<form  id="formbox">
		<input type="file" name="myfile">
		<input type="button" class="savebutton" value="提交"> 
	</form>
</body>
</html>
<script src="./jquery.min.js"></script>
<script type="text/javascript">
	$('.savebutton').click(function(){
		var obj = new FormData(document.getElementById("formbox"));;
		$.ajax({
		   type:"POST",
		   url:"./ajax.php",
		   data: obj,
		   contentType: false,  
		   processData: false,
		   success: function (data){
		   		console.log(data);
			}
		});
	})

</script>

后台处理图片上传

<?php 
/**
 * 文件上传
 * 
 */
$file = $_FILES['myfile']; //获取文件信息
$tmp_url = $file['tmp_name'];  //获取临时文件路径;
// $dirname = dirname($_SERVER['SCRIPT_FILENAME']); //获取目录绝对路径(a/b/);
$img_url = './talk_img/'.$file['name']; //设置文件存储位置
move_uploaded_file($tmp_url, $img_url); //移动图片至指定位置

$img = '';
echo $img;
?>

说明

contentType
{
代表发送信息至服务器时内容编码类型,通俗点说就是告诉服务器从浏览器提交过来的数据格式。
在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件。
}
processData
{
这个参数是jquery独有的。processData的默认值是true。
用于对data参数进行序列化处理。
}

 

 

 

 

 

 

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页