新手小坑：Ajax上传图片的方法

非要使用ajax上传图片不可？

是的，经常可以遇到表单里的图片上传和文字分开的情况。当然可以在最后提交时再一锅煮也行。不过这里提供的ajax上传图片的办法也很具有使用价值。在需要分开上传图片和文字内容的时候绝对有用。

方法一、

在写ajax前单独实例化一个form，该form只含有上传文件的input。具体代码如下

var formData = new FormData;

并且可以很灵活的给该对象添加属性，如：

formData.append('username','dan');
formdata.append('file_type','jpg');

之后就可以进行ajax操作了，具体如下：

$.ajax({
    url:'ooooxxxx';
    data:formData;
    type:'POST';
    dataType:'JSON';
    cache:false;
    processData:false;
    contentType:false;
    success:function(res){}
})

之后就是后台操作$_FILES下的参数，正常进行图片上传。自己添加的属性可以在POST中获得。

这种方法比较常规。适用于图片原始路径不能方便的从input标签中获取的情况。

毕竟做后台的时候，接手的一些视图层的input标签是用各种js框架搭建出来的。

在代码杂乱不方便理清时，可以使用这种省时省力的办法。能直接在后台得到完整的图片上传信息。

方法二、

第二种方法是在有缩略图的情况下可以使用。缩略图是经过base64编码后，直接在img标签的src属性里存放并显示的一种形式。可以先获取图片的base64编码，再通过ajax上传。前台代码就略过了，看一下在后台怎么进行处理：

        if(strpos($pic,'data:image') !==false){
            $name =md5(uniqid()).'.jpg';           
            $src=base64_decode(explode(',',$pic)[1]);
            file_put_contents($path.$name,$src);
        }

主要过程就是先解码，然后使用file_put_contents直接将解码后的数据存入目标路径。

最后

不懂前端的php程序员和不懂后台的前端程序员在一起配合是真的可怕（手动滑稽）
在剪不断理还乱的前端代码中想找到一个简明高效的图片上传方式还真是难。这次之所以遇到问题就是因为我并不用vue，一直在用jq。而我们公司的前端在做页面的时候全用vue写的，我只好一边和他讨论，一边在他写的各种方法中寻求生存…原本我是在他的vue代码外面另外写的jq代码，结果能用的部分特别少，ajax根本没有触发，其他的一些事件也是，因此有这次小研究。结论就是在vue的事件里嵌入自己要用的ajax代码，这样就绕过jq繁琐的抓取标签，抓取信息的过程，直接提交图片进行保存。