PHP第二十二天作业-使用$.ajax进行文件上传-2018-04-28 - PHP学习作业

首页 > 博客列表 > PHP第二十二天作业-使用$.ajax进行文件上传-2018-04-28

博主信息

博文 42

粉丝 3

访问量 31258

专题推荐

更多>

总结：

formData的基本用法：FormData对象，可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可。

php部分使用$_FILES全局数组对上传的文件进行处理，上传成功后返回相应的信息。

运行效果:

微信图片_20180428160434.png

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用ajax实现文件上传</title>
	<style type="text/css">
		.box{
			width: 360px;
			margin: 0 auto;
		}
		button{
			border-style: hidden;
			background-color: lightblue;
			color: white;
			padding:5px 10px 5px 10px;
			margin-top: 50px;
		}
		input{

		}
	</style>
</head>
<body>
	<div class="box">
		<p>
			<label>选择上传文件:</label>
			<input type="file" name="file">
		</p>
		<p>
			<button>上传</button>
		</p>
	</div>
</body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$('button:first').click(function(){
		if($("input[name='file']").val().length==0){
			$("input[name='file']").parent($('span').remove())
			$('button:first').after('<span style="color:lightgreen;">未选择任何文件!</span>')
		}else{
			//获取文件路径
			var files = $("input[name='file']")[0].files[0]

			//实例化Formdata对象
			var formdata = new FormData()
			formdata.append('files',files)

			//使用$.ajax进行数据传送
			$.ajax({
				url:'file.php',
				type:'POST',
				data:formdata,
				// dataType:'JSON',
				processData:false,
				contentType:false,
				success:function(status){
					$("input[name='file']").parent($('span').remove())
					$("input[name='file']").after('<br><span style="color:lightgreen;font-size: 14px;">'+status+'</span>')
				}
			})
		}
	})

</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

PHP代码

<?php 
	if($_SERVER['REQUEST_METHOD']=="POST"){
		//判断请求是否为空
		if(isset($_FILES['files'])){
			$img_type=['image/jpg','image/jpeg','image/png'];

			//判断上传的图片是否规定的类型
			if(in_array($_FILES['files']['type'],$img_type)){
				//将文件移动要临时目录
				if(move_uploaded_file($_FILES['files']['tmp_name'],"upload/{$_FILES['files']['name']}")){
					//上传成功
					echo '文件上传成功';
				}
				else{
					//上传失败
					echo '上传失败';
				}
			}
			else{
				//提示格式不对
				echo '上传的图片格式不正确';
			}
		}
			//对上传错误进行处理
		if ($_FILES['files']['error'] > 0 ) {
			echo '<p>错误原因是:<strong>';

			switch ($_FILES['files']['error']) {
				case 1:
					echo '文件超过了php.ini配置中设置的大小';
					break;
				case 2:
					echo '文件超过了表单中常量设置的大小';
					break;
				case 3:
					echo '仅有部分文件被上传';
					break;
				case 4:
					echo '没有文件被上传';
					break;
				case 6:
					echo '没有可用的临时文件夹';
					break;
				case 7:
					echo '磁盘已满,写入失败';
					break;
				case 8:
					echo '上传意外中止';
					break;
				
				default:
					echo '系统未知错误';
					break;
			}

			echo '</strong></p>';
			//保险起见,最好把创建的临时文件删除,当然系统也会在结束会话时自动清空
			if (file_exists($_FILES['files']['tmp_name']) && is_file($_FILES['files']['tmp_name'])) {
				unlink($_FILES['files']['tmp_name']);
			}
		}
	} else {
		echo '1';
	}


 ?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：