AJAX怎样在laravel里上传一个表单？

Question

以下是我的ajax代码和前端代码：

      <form  id="file-upload-form" method="POST" action="/admin/upload/file"
            class="form-horizontal" enctype="multipart/form-data">
        <input type="hidden" id="file-upload" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" id="file-upload" name="folder" value="{{ $folder }}">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
          <h4 class="modal-title">上传新的文件</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="file" class="col-sm-3 control-label">
              文件
            </label>
            <div class="col-sm-8" id="photo1">
              <input type="file" id="file" name="file" >
            </div>
          </div>
          <div class="form-group">
            <label for="file_name" class="col-sm-3 control-label">
              选择上传到的文件夹/命名并上传或直接命名并上传
            </label>
            <div class="col-sm-4">
              <input type="text" id="file_name" name="file_name"
                     class="form-control">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            取消
          </button>
            <button type="button" class="btn btn-default"  onclick="uploadPhoto()">
                AJAX上传
            </button>
          <button type="submit" class="btn btn-primary" onclick="handle_upload_image()" >
            上传文件
          </button>
        </div>
      </form>

其中上传文件按钮是正常的submit按钮，AJAX上传是AJAX上传按钮，下面是AJAX的JS代码：

<script>
    // todo.. 可优化成无需传js参数即可上传
    //AJAX上传base64


    function uploadPhoto() {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("file-upload-form").submit()

            }
        }
        xmlhttp.open("POST","",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send();

    }

</script>

就是要通过路由识别/admin/upload/file这个路径来把这个form的信息跟那个正常的上传文件按钮一样上传给控制器处理掉，目前就是500错误，（不用AJAX的那个没有问题的，即后端代码没问题的），所以问题是这个AJAX代码及具体该怎么写才对。

接受建议改成这样了，还是不行，求问哪里错了

 function uploadPhoto() {
        var v = '查看内容是否加载：';
        const file = $("#file").val();
        var file_upload = $("#file-upload").val();
        var file_name = $("#file_name").val();
        var formData = new FormData($("#file-upload-form"));
        console.log(v+file+'___'+file_upload+'___'+file_name);
        $.ajax({
          url:"/admin/upload/file",
            contentType: 'application/x-www-form-urlencoded',
            type:"POST",
            data:formData,
            datatype:"",
            processData: false,
            success:function(){
                $('#page_image').html($('#file_name').text());
            }
        });
        }

Answer 1

这个用的不对啊 post请求啥也没传啊

Answer 2

因为你要上传文件，所以 contentType: "application/json; charset=utf-8",是不正确的。 改成这样 $.ajax({ url:"/admin/upload/file", processData: false, contentType: false, type:"POST", data:formData, success:function(){ $('#page_image').html($('#file_name').text()); } });

Answer 3

contentType不需要