jQuery ajax文件上传

最新推荐文章于 2023-03-16 12:05:09 发布

柳逸尘Lycodx

最新推荐文章于 2023-03-16 12:05:09 发布

阅读量161

点赞数

分类专栏： javascript 文章标签： javascript ajax

本文链接：https://blog.csdn.net/fzx_javascript/article/details/104641180

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

废话不多说了直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
	<div>
		<input type="text" id="name">
		<input type="file" id="file">
		<button id="btn">确定</button>
	</div>
</body>
</html>
<script>
	$(function () {
		$("#btn").click(function () {
			//实例化一个FormData对象
			var formData = new FormData();
			var name = $('#name').val();
			var file = $('#file')[0].files[0];
			formData.append('name',name);
			formData.append('file',file);
			$.ajax({
				url:"ope.php",
				type:"POST",
				data:formData,
				datatype:'json',
				contentType: false,//上传文件时，此项是必须的
            	processData: false,//是否序列化data属性
            	success:function (res) {
            		console.log(res);
            	}
			});
		});
	});
</script>

后端

<?php 

if (!isset($_FILES['file'])) {
	exit('文件不存在');
}
$name = isset($_POST['name']) ? $_POST['name'] : "";
$file = $_FILES['file'];
$list = [
	'name' => $name,
	'file' => $file
];
var_dump($list);

接收结果
在这里插入图片描述

柳逸尘Lycodx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery ajax文件上传

话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js">&...
复制链接

扫一扫

专栏目录