JS实现图片上传并显示

最新推荐文章于 2022-09-05 10:39:21 发布

寒酥_

最新推荐文章于 2022-09-05 10:39:21 发布

阅读量1.7k

点赞数 1

文章标签： js php ajax

本文链接：https://blog.csdn.net/weixin_49115895/article/details/111569137

版权

HTML代码

<!-- html代码 -->
<body>
	<input type="file" id='file'>
	<div id="">
			<img src=""  id='img'>
	</div>

</body>

js代码

<script type="text/javascript">
	var file =document.querySelector('#file');
	file.addEventListener('change',function(){//事件监听上传表单的状态
		 var upload = file.files[0]//通过files属性获取图片信息
		 var form = new FormData()//创建fromData对象
		form.append('file',upload)
		var xhr = new XMLHttpRequest();
		xhr.open('POST','07.php')
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status== 200){
				var data = JSON.parse(xhr.responseText)
				document.querySelector('#img').src=data['data']
			}
		}
		xhr.send(form)
		
	})
</script>

php代码


```php
//php代码
<?php 
$file = $_FILES['file'];
//为文件重命名
$file_name = 'upload/'.time().'.'.pathinfo($file['name'])['extension'];
//移动文件
move_uploaded_file($file['tmp_name'],$file_name);
//此时图片已经移动到了upload文件夹中，现在我们要做的就是把前台显示的图片地址传递过去
echo json_encode(['data'=>'http://www.grh.cn/'.$file_name])
 ?>

效果展示

在这里插入图片描述

寒酥_

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片上传并显示

HTML代码<body> <input type="file" id='file'> <div id=""> <img src="" id='img'> </div></body>js代码<script type="text/javascript"> var file =document.querySelector('#file'); file.add
复制链接

扫一扫