本篇向大家介绍一种全新的上传图片的方式，利用html5的文件阅读器读取图片文件，然后将数据传输到服务器再使用服务器端编程语言(专业超文本预处理器的缩写)进行处理。实现过程如下（带图片预览功能)前端超文本标记语言代码上传，html

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title上传/title脚本类型=' text/JAVAScript ' src=' http : js/jquery。量滴js '/脚本样式。上传{ width :300 px高度：200 px位置：相对；}.上传输入[type=' file ']{ position : absolute；宽度：70 pxtop:0left:0z索引：10;opa city 33600 filter : alpha(不透明度=0);}.上传输入。sel按钮{ width :70 px高度：30 px背景技术# cf 001 bcolor : # FFF；font-size :14 px位置：绝对；top:0left:0z索引：9;border : none cursor :指针指针；}.上传输入。向上按钮{宽度：70 px高度：30 px背景技术# cf 001 bcolor : # FFF；font-size :14 px位置：绝对；top:50pxleft:0z索引：10;border : none cursor :指针指针；}/style/head dydiv class=' upload ' input type=' file ' name=' file '/input type=' button ' name=' sel button ' class=' sel button ' value='选择文件/input type=' button ' name=' up button ' class=' up button ' value='上传//div class=' preview ' img src=' http : # ' class=' image _ thumb ' alt='图片预览//div/body/html样式如下图

接下来是射流研究…代码

脚本类型='text/javascript' $(' .向上按钮').单击(函数(){ //定义允许上传的图片格式在前台就可以直接判断，不合法的格式将不会上传var filetype=['jpg '，' jpeg '，' png '，' gif ']；if($(').图像')。获取(0)。文件){ fi=$(' .图像')。获取(0)。文件[0];//得到文件信息//判断文件格式是否是图片如果不是图片则返回false var fname=fi.name.split(' . ');if(filetype.indexOf(fname[1]).toLowerCase())==-1){ alert('文件格式不支持');返回；} //实例化h5的文件读取器var fr=新文件读取器()；法郎ReadAsDataURl(fi)；//以base64编码格式读取图片文件法郎加载时=函数(frev){ pic=frev。目标。结果；//得到结果数据//开始上传之前，预览图片$('.image _ thumb ').attr('src '，pic)；//使用创建交互式、快速动态网页应用的网页开发技术利用邮政方式提交数据$.post('handle.php '，{ message:pic，filename:fname[0]，filetype:fname[1]，filesize:fi.size }，function(data){ data=eval('(' data ')')；if(数据。代码==1 | |数据。代码==2){控制台。日志('上传失败)} else if(数据。代码==0){控制台。日志('上传成功') } } );} } })/脚本接下来是服务器端编程语言(专业超文本预处理器的缩写)处理代码handle.php

$imgtype=array('gif'='gif '，' png'='png '，' jpg'='jpeg '，' JPEG '=' JPEG ')；//图片类型在传输过程中对应的头信息$ message=$ _ POST[' message ']；//接收以base64编码的图片数据$ filename=$ _ POST[' filename ']；//接收文件名称$ ft type=$ _ POST['文件类型']；//接收文件类型//首先将头信息去掉，然后解码剩余的base64编码的数据$ message=base64 _ decode(substr($ message，strlen('data:image/').$ img类型[strtolow($ ft类型)].base64’))；$文件名=$文件名。'.$ ft类型；$ furl=' d :/now/'；//开始写文件$ file=fopen(furl ).$filename，' w '；if(fwrite($file，$ message)==false){ echo JSON _ encode(array(' code '=1，' con '=' failed '))；退出；}echo json_encode(数组(' code'=0，' con '=$ filename))；选择文件然后点击上传的效果如下图

以上是上传全图的代码。当然，还有很多地方可以针对PHP进行优化，比如文件名，可以通过重命名来保证上传同一个文件名后的文件名不一样等等。我刚开始用这种上传方式。一开始是受Node.js上传的启发，然后尝试应用到PHP中。没想到上传成功。

希望大家都能按照这个方法上传图片。