ajax无刷新上传效果

最新推荐文章于 2021-08-06 16:22:28 发布

Leroi_Liu

最新推荐文章于 2021-08-06 16:22:28 发布

阅读量216

点赞数

分类专栏： PHP json ajax jquery

本文链接：https://blog.csdn.net/Leroi_Liu/article/details/73189347

版权

PHP 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

json

5 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

ajaxupload.php代码部分：

<html>
<head>
<meta type="text/html" charset='utf8' />
<title>用form表单进行的上传-formdata</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
<form action="upload.php" id="uploadForm" style="display: none" >
 上传 <input type="file" name="image" />
</form>
<input type="button" id="upload" value="点击" />
<div id="content">	
</div>
</body>
<script>
$("#upload").click(function(){
  $("input[type='file']").click().change(function(){
	    //html5 FormData对象 
		var form=new FormData($("#uploadForm")[0]);
		$.ajax({
	    url: 'upload.php',
	    type: 'POST',
	    cache: false,
	    data: form,
	    processData: false,
	    contentType: false
	}).done(function(data) {
		data=JSON.parse(data);
        $("#content").html("<img src="+data.picName+" width=100 heigth=200  />");
	}).fail(function(data) {});
	})
  })
</script>
</html>

upload.php代码部分：

<?php
move_uploaded_file($_FILES['image']['tmp_name'],$_FILES['image']['name']);
$name=$_FILES['image']['name'];
$arr=array('picName'=>$name);
echo json_encode($arr);