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

前端之家收集整理的这篇文章主要介绍了php+html5实现无刷新图片上传教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <a href="/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,没想到还真能上传成功。

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

猜你在找的PHP相关文章