文件上传用Ajax方式显示——2018年4月19日

前段代码：

实例

<form action="" method="POST" enctype="multipart/form-data">
	<input type="hidden" name="MAX_FILE_SIZE" value="512222">
	<fieldset>
		<legend align="center">文件上传</legend>
		<p><strong>选择文件</strong><input type="file" name="upload"></p>
	</fieldset>
	    <p><button align="center">选择上传</button></p>
</form>

 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$('button:first').click(function(){

		$.ajax({
			url: 'api.php',
			type: "post",
			data:formData,
			dataType: 'json', 
            contentType: false,  
            processData: false,  
          success: function (res) {  
              $('span').remove()
              switch(res.status){
              	case 0:
              	$('p').after('<span>').next().html(res.msg).css('color','green')
              	break
              	case 1:
              	$('p').after('<span>').next().html(res.msg).css('color','red')
              	break
              	case 2:
              	$('p').after('<span>').next().html(res.msg).css('color','red')
              	break
              	case 3:
              	$('p').after('<span>').next().html(res.msg).css('color','red')
              	break
              }
          }

      })
		
		return false;
	})
</script>

实例

<?php 
	//检测请求类型是否POST,如果不是应该提示用户类型不对
	if ($_SERVER['REQUEST_METHOD'] == 'POST') {
		//检测是否有文件被上传
		if (isset($_FILES['upload'])) {
			//设置允许上传的文件类型
			$allow = ['image/jpg','image/jpeg', 'image/png'];
			if (in_array($_FILES['upload']['type'], $allow)) {
				//将文件先移动到临时目录
				if (move_uploaded_file($_FILES['upload']['tmp_name'], "upload/{$_FILES['upload']['name']}")){
					//上传成功
					echo "<script>alert('文件上传成功')</script>";
				} 
			}else {
					//提示格式不对
					echo "<script>alert('仅允许上传jpg和png格式的图片')</script>";
				}
		}
		//对上传错误进行处理
		if ($_FILES['upload']['error'] > 0 ) {
			echo '<p>错误原因是:<strong>';

			switch ($_FILES['upload']['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['upload']['tmp_name']) && is_file($_FILES['upload']['tmp_name'])) {
				unlink($_FILES['upload']['tmp_name']);
			}
		}
	} else {
		echo '1';
	}
?>

总结：

ajax语法是：

ajax({

url: 'api/demo.php',

//客户端的请求类型:GET,POST...,推荐大写

type: 'GET',

//从服务器端返回的数据类型格式:xml,html,json,txt等

dataType: 'json',

//异步true,还是同步false(锁定浏览器)

 async: true,

//发送数据

//1.查询字符串键值对,多个值之间用&连接

data: 'name='+$(':input').val(),

//2.json格式

// data: {'name':$(':input').val()},

//3.当表单有多个字段时使用序列化方法可提高效率

//将表单控件内容序列化为查询键值对格式

// data: $('form:first').serialize(),

//4.将表单控件内容序列化为json格式

data: $('form:first').serializeArray(),

//成功回调

success: function(msg,status,xhr) {

console.log(msg)

$('p span').empty()

$('p').append($(msg))

}

})