FileReader+Ajax+PHP实现异步上传图片和预览

最新推荐文章于 2021-03-19 07:30:33 发布

置顶

石-破天

最新推荐文章于 2021-03-19 07:30:33 发布

阅读量3.7k

点赞数 2

分类专栏： php jquery CI框架 html5 ajax FileReader 文章标签： ajax php html5 FileReader

本文链接：https://blog.csdn.net/ding_zhi_jie/article/details/53467388

版权

本文介绍了如何使用HTML5的FileReader接口结合Ajax和PHP实现图片的异步上传与预览。首先，通过FileReader读取并编码图片；然后，使用Ajax将编码后的数据发送到PHP服务器；服务器端接收到数据后解码并用file_put_contents()保存图片；最后，服务器反馈信息给前端，前端进行预览。

摘要由CSDN通过智能技术生成

原理：

1.利用html5开放的FileReader来获取图片并编码

2.将编码后的数据通过ajax异步发送到PHP服务端

3.服务端接收数据后解码图片信息，利用PHP内置函数file_put_contents()生成图片并保存

4.后台操作成功后，返回给前台信息，前台预览

前台html：

<div class="form-group">
	<label class="col-md-2 col-sm-2 control-label">图标</label>
	<div class="col-md-4">
		<img id="simg" class="group-picture" width="75%" height="75%" src="" alt="头图"><br>
		<a href="javascript:;" class="a-upload">
			<input type="file"  name=