php+html5实现无刷新图片上传教程

本篇向大家介绍一种全新的上传图片的方式,利用html5的FileReader读取图片文件,然后将数据传输到服务器再使用PHP进行处理。实现过程如下(带图片预览功能) 前端HTML代码 upload,html

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>

接下来是PHP处理代码 handle.PHP

'gif','png'=>'png','jpg'=>'jpeg','jpeg'=>'jpeg' ); //图片类型在传输过程中对应的头信息 $message = $_POST['message']; //接收以base64编码的图片数据 $filename = $_POST['filename']; //接收文件名称 $ftype = $_POST['filetype']; //接收文件类型 //首先将头信息去掉,然后解码剩余的base64编码的数据 $message = base64_decode(substr($message,strlen('data:image/'.$imgtype[strtolower($ftype)].';base64,'))); $filename = $filename.".".$ftype; $furl = "D:/Now/"; //开始写文件 $file = fopen($furl.$filename,"w"); if(fwrite($file,$message) === false){ echo json_encode(array('code'=>1,'con'=>'Failed')); exit; } echo json_encode(array('code'=>0,'con'=>$filename));

选择文件然后点击上传效果如下图

以上就是整个图片上传代码。当然对于PHP的部分还有很多可以优化的地方,比如文件名部分,可以重命名,以保证相同文件上传以后的文件名是不同的等等。这种上传方式我也是刚开始使用,当初是受Node.js做上传的的启发,然后尝试着应用于PHP,没想到还真能上传成功。

希望大家也可以按照此方法实现图片上传

相关文章

统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
前言 之前做了微信登录,所以总结一下微信授权登录并获取用户...
FastAdmin是我第一个接触的后台管理系统框架。FastAdmin是一...
之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...