TP5,ajax实现异步上传图片

用ajax上传图片需要阻止它处理数据，具体如下

前台代码

  <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">图片上传：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="file" class="input-text " placeholder="图片" name="image" id="file" value=""></div>
        </div>

    <script type="text/javascript">
                     $("#submit").on("click", function(event) {
                         var form=document.getElementById("form-adv-add");
                         var formdata =new FormData(form);
                         $.ajax({
                             type: "POST",
                             url: "{:url('advinfo/addAdv')}",
                             processData: false,  // 不要处理发送的数据
                             contentType: false,   // 不要设置Content-Type请求头
                             data:formdata,
                             dataType:'json',
                             success: function (data) {
                                 if (data.status == 1) {
                                     alert(data.message);
                                     window.parent.location.reload(); //刷新父页面
                                 } else {
                                     alert(data.message);
                                 }
                             }
                         });
                     })
       </script>

php后台代码

      $file = request()->file('image');//获取上传图片
        // 移动到框架应用根目录/public/uploads/ 目录下
        if ($file) {
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if ($info) {
                $img = $info->getSaveName();//获取名称
                $imgpath = DS.'uploads'.DS.$img;
                $path = str_replace(DS,"/",$imgpath);//数据库存储路径
            } else {
                $status = 0;
                $message = '图片上传失败';
            }
        }else{
            $status = 0;
            $message = '图片上传失败';
            return ['status' => $status, 'message' => $message];
        }

上传预览，html5方法

    $(function () {
        $("#file").change(function (e) {
            var file = e.target.files[0] || e.dataTransfer.files[0];
            $('#photoCover').val(document.getElementById("file").files[0].name);
            if (file) {
                var reader = new FileReader();
                reader.onload = function () {
                    $("img").attr("src", this.result);
                }
                reader.readAsDataURL(file);
            }
        });
    })

上传预览方法参考：https://www.cnblogs.com/len0031/p/7678499.html