JS如何实现异步上传压缩图片
小编给大家分享一下JS如何实现异步上传压缩图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
目前创新互联公司已为数千家的企业提供了网站建设、域名、虚拟主机、网站运营、企业网站设计、沙河口网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
先看调用页面:
1.首先你要载入JS类库:
2.然后就是写好form
3.准备处理图片以及图片异步提交的JS。
从代码中可以看出,这个JS库是把图片转成码,然后用变量存起来,然后在用异步POST到服务器中在处理。
看起来貌似没有什么特别的地方,的确实在也没有什么特别的地方.......
后台处理程序PHP:
function error($msg=''){ $return = array('msg'=>$msg); echo json_encode($return); exit(); } function main(){ if(!$_POST['img']){ error('请上传图片!'); } $img = $_POST['img']; $path = './upload/'; $type_limit = array('jpg','jpeg','png'); if(preg_match('/data:\s*image\/(\w+);base64,/iu',$img,$tmp)){ if(!in_array($tmp[1],$type_limit)){ error('图片格式不正确,只支持jpg,jpeg,png!'); } }else{ error('抱歉!上传失败,请重新再试!'); } $img = str_replace(' ','+',$img); $img = str_replace($tmp[0], '', $img); $img = base64_decode($img); $file = $path.time().'.'.$tmp[1]; if(!file_put_contents($file,$img)){ error('上传图片失败!'); }else{ error('恭喜您!上传成功!'); } } main();
上述代码如果有错误欢迎指出。
如上诉代码,正如你看到的那样,经过BASE64加密过的图片码经过JS异步的POST过来后端后,我们要把代码还原。但是JS库加密的时候会带有一些标签,所以还原前需要处理掉这些本来不属于图片的东西。
$img = str_replace(' ','+',$img); $img = str_replace($tmp[0], '', $img); $img = base64_decode($img);
最后把代码塞进文件,设置好相应的文件名和扩展名,图片就成功上传到了服务器了。
注意:
前后端包括JS编码要要一致,建议UTF-8
如果图片还原不会来的话,那肯定是数据问题,打印POST过来的图片码出来看看。
以上是“JS如何实现异步上传压缩图片”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享名称:JS如何实现异步上传压缩图片
网站路径:http://myzitong.com/article/gjsijc.html