AJAX上传图片

     我们都知道移动端是和服务端分离的&＃xff0c;前台后台井水不犯河水&＃xff0c;只通过异步ajax来传输数据&＃xff0c;尤其是微信小程序和WEBAPP&＃xff0c;因此不能直接通过调用PHP代码的方式来完成图片上传&＃xff0c;因此这时就需要通过先将图片转化为BASE64的格式

var fr &＃61; new FileReader();
                //成功处理
                fr.onload &＃61; function(e) {
                    //这里是图片的base64字符串
                    console.log(e.target.result.length);
                    $(&＃39;#im&＃39;).attr("src",e.target.result);
                    console.log(e.target.result);
                }; 
                 //失败处理
                fr.onerror &＃61; function() {
                    }
                fr.readAsDataURL(ob.files[0]);

并且以post方式提交到后台&＃xff0c;这时后台共有三种方式来存储图片

1.直接存储base64的内容到数据表中

这种方法是最直接和简单的&＃xff0c;将base64转换为blob形式&＃xff0c;直接存入数据库&＃xff0c;但这样会大大浪费数据库资源和运行速度。

2.后端接到base64数据后转换为图片并存在服务器文件中&＃xff0c;数据库中只存储图片的URL

大大节省了服务器的资源&＃xff0c;并且前台标签可以直接通过src赋值为网络地址来显示这张图片

$base64&＃61;input(&＃39;post.base&＃39;,"","strval");
echo strlen($base64);
preg_match(&＃39;/^(data:\s*image\/(\w&＃43;);base64,)/&＃39;, $base64, $result);
$type &＃61; $result[2]; //获取图片的类型jpg png等
echo $type;
$name &＃61; "xxxx.".$type;//图片重命名
$savepath &＃61; "路径".$name; //图片保存目录
file_put_contents($savepath, base64_decode(str_replace($result[1], &＃39;&＃39;, $base64))); //对图片进行解析并保存

3.大型云存储网盘&＃xff08;例如七牛云&＃xff09;

当图片数量特别多时&＃xff0c;存在服务器中就会导致服务器负载过重&＃xff0c;这是我们可以采取云盘存取的方式&＃xff0c;注册七牛云网盘后&＃xff0c;可以将图片直接存进七牛云网盘&＃xff0c;并且返回一个网络地址&＃xff0c;将这个网络地址存入数据表中即可