代码之家  ›  专栏  ›  技术社区  ›  Niklesh Raut

如何在jquery ajax中使用formData在laravel中上传文件

  •  1
  • Niklesh Raut  · 技术社区  · 6 年前

    我使用laravel 5.4和jquery Ajax上传文件和一些表单数据。

    我正在使用以下代码

    function submitDocument(){
        var formData = new FormData(); // Currently empty
        var _token = $("#_token").val().trim();
        formData.append('title', $("#title").val());
        formData.append("doc",$("#doc")[0].files[0]);
        $.ajax({
          url: "documents",
          method: "post",
          data:{_token,formData},
        }).done(function(data) {
    
        });
        return false;// Not to submit page
    }
    

    我犯了个错误

    未捕获类型错误:非法调用

    enter image description here

    我怎样才能解决这个问题?提前感谢您抽出时间。

    我可以通过使用

    console.log(formData.get('title'));
    console.log(formData.get('doc'));
    

    enter image description here

    3 回复  |  直到 6 年前
        1
  •  2
  •   VinoCoder    6 年前

    尝试添加 processData: false, contentType: false 在您的代码中

    用以下内容替换脚本:

    function submitDocument(){
    var formData = new FormData(); // Currently empty
    var _token = $("#_token").val().trim();
    formData.append('title', $("#title").val());
    formData.append("doc",$("#doc")[0].files[0]);
    $.ajax({
      url: "documents",
      method: "post",
      data:{_token,formData},
      cache : false,
      processData: false,
      contentType: false
    }).done(function(data) {
    
    });
    return false;// Not to submit page
    }
    

    默认情况下,作为对象传递到数据选项的数据将被处理并转换为查询字符串,符合默认内容类型“application/x-www-form-urlencoded”。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false。

        2
  •  1
  •   wolacinio    6 年前
    <script>
    $(document).ready(function() {
        var url = "{{ url('/admin/file') }}"; 
        var options = { 
                type: 'post',
                url: url,       
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                dataType: 'doc',
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert('Ok');
                },
                error: function (data) {
                    alert('Error');
                }
        }; 
        $('#save').on('click', function() { 
            $("#form").ajaxSubmit(options); 
            return false; 
        }); 
    }); 
    </script>
    
        3
  •  0
  •   Deep Swaroop Sachan    6 年前

    $(document).ready(function (){
    $("#form").on('submit',(function(e){
            e.preventDefault();
            var formdata = new FormData(this);
            var _token = $("#_token").val().trim();
            formData.append('title', $("#title").val());
            formData.append("doc",$("#doc")[0].files[0]);
            $.ajax({
                url: "/site/url",
                type: "POST",
                data:{token:_token,formData},
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
    
                },
            });
        }));});