web网页端上传用户头像，后端获取后，返回路径给前端做展示

上传头像的实现思路，以前就有的，不过二次修改移动框架的时候，被自己给坑了。所以记一下吧，方便路过的朋友。

  分析用户操作，一般都是前端选中图片后，做本地预览。然后submit提交给后端服务器。

  这边记录下，自己的思路。
  第一步：选择图片

  第二步，通过选择事件，选择图片，然后提交服务器。等待服务器返回图片上传好的路径后。做本地展示。（更高级的操作是，先加载本地预览，上传成功后替换本地预览）。

  第三步，点击提交按钮。上传当前服务器返回的文件名，存入数据库。然后重新加载本页面。新用户头像上传完毕。

  这方法有缺陷，但是简单直接，大家可能会想到服务器上图片多出来了。不过这个是在登陆成功以后操作。在上传前可以判断先用户是否登陆。若想删除没用到的图片。那就要辛苦下，后端做个查询。然后操作文件删除。
  可能有人会说，给前端留个删除图片。

  //上传头像-后端接收方法(thinkphp-框架)
public function upload(){
    // 获取上传文件表单字段名，不传文件会报错。
    $fileKey = array_keys(request()->file());//获取文件名。
    $file = request()->file($fileKey['0']);//如果想传多图。偷懒，循环下这个方法。多拿几个
    $info = $file->validate(['ext' => 'jpg,png,gif,jpeg'])->move('uploads');//判断图片类型。
    $result['code'] = 1;
    $result['title'] = '头像!';
    $path=str_replace('\','/',$info->getSaveName());//移动后拿到的文件名称
    $result['url'] = '/uploads/'. $path;//拼接返回目录，跟前端做显示准备
    return json(['code'=>0, 'msg'=>'上传成功', 'data'=>$result]);//json返回数据。如果要考虑错误情况，可以在加个判断。
}

  //前端静态页面代码 .注意点
        {1.id=form4
         2. class="upload-btn"
         3.input框中的 onchange方法（upload_cover上传方法）。id='picture_upload' 
         4.隐藏的newhead方法。默认值为空，因为没有值要传。    
         5.MyButton1=提交图片上传以后的newhead值，给后端的。          
        }
          <form id="form4">
                                <div class="upload-btn">
                                    <button class="btn btn-submit" >选择要上传的图片 <input   onchange="upload_cover(this)"  id="picture_upload" name="file"  type="file" class="upload-input"></button>
                                </div>
                                <div class="btn btn-tj">
                                    <input type="hidden" value="" name="newhead" id="newhead" />
                                    <input type="submit" value="确定提交" id="MyButton1" class="btn btn-submit">
                                </div>
                            </form>


              //上传图片  　
            function upload_cover(obj) {//obj就是input文件框的所有内容
                      ajax_upload(obj.id, function(data) {//匿名函数，执行上传成功以后的操作。核心在ajax_upload方法中。
                          console.log('test');//obj.id=picture_upload 给上传js
                    var isrc = data.data.url.replace(////g, '/');//
                    console.log(isrc);
                    $('.avatarimg').attr('src',isrc); //给<input>的src赋值去显示图片
                    // //更换页面显示4个图
                    $('.rightimg').attr('src',isrc); //给<input>的src赋值去显示图片
                    $('#newhead').attr('value',isrc);//显示成功后，就该提交form表单了。
                });
            }

               function ajax_upload(feid, callback) {//feid上传图片插件要通过这个id,也就是picture_upload 来拿文件资源。callback为这个函数的回调值，会返给upload_cover方法，做页面显示时使用。
                    $.ajaxFileUpload({
                        fileElementId: feid,
                        url:"/index.php/home/webmember/upload",//上传文件的路径
                        type: 'post',//传输方式。大小在7mb,左右，不要超限制，或者看下后端最大图片限制。
                        dataType: 'json',//数据类型
                        secureuri: false,//是否安全模式
                        async : true,//是否是异步
                        success: function(data) {
                            if (callback) callback.call(this, data);//如果有回调，返回给调用的方法。
                        },
                              error: function(data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);//控制台输出，方便前端调试。
                        }
                    });
              }
              //前端验证图片格式是否在要求的格式内，这里没有用，因为后端已经验证了。      
        function image_check(feid) { //自己添加的文件后缀名的验证
                var img = document.getElementById(feid);
                    return /.(jpg|png|gif|bmp)$/.test(img.value)?true:(function() {
                    layer.msg('图片格式仅支持jpg、png、gif、bmp格式，且区分大小写.');
                    return false;
                })();
            }
        
  //
        //更换头像确认操作
   $(document).on('click', '#MyButton1', function () {
          //检查字段.后端验证。这里能提交一个，那一个页面就能提交多个，希望对大家有帮助。
          $.ajax({
              type: "POST",
              dataType: "json",
              url: "/index.php/home/webmember/upavatar" ,//修改头像接口
              data: $('#form4').serialize(),//这里写下为什么用这个，前端对这个id下面的form4做了序列化操作。发送到后端，所有的当前form中，input,只要带name属性的，都能接收到。前端知识，还没被废弃，个人觉得挺好用的。后端接收也很轻松。
              success: function (res){
                  layer.msg(res.msg)
                  setInterval(function () {
                      window.location.reload()
                  }, 2000)
              },
              error : function() {
                  alert("异常提交");
              }
          });
            })

  备注：ajaxFileUpload这是一个前端js，相当于是一个插件。只要引入就可以了。记得还要jquery.
        //可以直接下载，或者引用。
        http://www.y1360.com/static_index/js/ajaxfileupload.js