Ajax无刷新图片上传

最新推荐文章于 2021-08-06 10:57:30 发布

红尘炼炼心

最新推荐文章于 2021-08-06 10:57:30 发布

阅读量1.3k

点赞数

分类专栏： ❤『javascript学习』文章标签： ajax jquery 图片

本文为博主寕王原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/nw_ningwang/article/details/78350430

版权

❤『javascript学习』专栏收录该内容

22 篇文章 0 订阅

订阅专栏

最近做聊天项目，由于聊天过程中需要发送图片，采用了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参数进行序列化处理。
}