【问题标题】:Jquery and HTML FormData returns "Uncaught TypeError: Illegal invocation"Jquery 和 HTML FormData 返回“未捕获的类型错误:非法调用”
【发布时间】:2012-09-27 04:22:07
【问题描述】:

我正在使用这个脚本来上传我的图片文件:http://jsfiddle.net/eHmSr/

$('.uploader input:file').on('change', function() {
  $this = $(this);

  $('.alert').remove();

  $.each($this[0].files, function(key, file) {
    $('.files').append('<li>' + file.name + '</li>');

    data = new FormData();
    data.append(file.name, file);

    $.ajax({
      url: $('.uploader').attr('action'),
      type: 'POST',
      dataType: 'json',
      data: data
    });
  });
});

但是当我点击上传按钮时,JavaScript 控制台返回此错误:

Uncaught TypeError: Illegal invocation 

你能帮帮我吗?

【问题讨论】:

  • 你确定吗? dataType: 'json',???
  • 是的,网址会以这种格式返回。
  • 在我的例子中,我想将一个文件作为更大数据集的一部分提交给 .NET MVC 控制器,该控制器接受一个序列化对象作为其操作的参数。正如lilalinux 所建议的那样,有必要使用一个FormData 对象,以及Blender 所建议的processData: false,正如Caio Tarifa 所建议的那样,还有 contentType: false 所建议的那样。任何小于所有三个的东西都不起作用。见[这个答案](stackoverflow.com/a/3

标签: jquery ajax html upload


【解决方案1】:

jQuery 处理data 属性并将值转换为字符串。

Adding processData: false 到您的选项对象修复错误,但我不确定它是否修复了问题。

演示:http://jsfiddle.net/eHmSr/1/

【讨论】:

  • 谢谢,但我需要删除此属性,请参阅此问题:stackoverflow.com/questions/12431760/…
  • 我修复了它,只需添加contentType: false。再次感谢!
  • @Blender 这个相同的代码在我的系统中运行,但在我的朋友(都使用 Windows 10)中运行,文件未发布。控制台中没有错误。
  • 就我而言,问题是我使用了 var data = {};但是,您必须使用 var data = new FormData();
  • 我无法弄清楚为什么这不起作用......直到我意识到这个过程是用一个 c 拼写的,而不是两个。
【解决方案2】:

我遇到了同样的问题

我通过使用两个选项解决了这个问题

contentType: false
processData: false

实际上我将这两个命令添加到我的 $.ajax({}) 函数中

【讨论】:

  • 这些可以和$.post一起使用吗?如果有怎么办??
【解决方案3】:

processData: false 添加到$.ajax 选项将解决此问题。

【讨论】:

    【解决方案4】:

    我的经验:

      var text = $('#myInputField');  
      var myObj = {title: 'Some title', content: text};  
      $.post(myUrl, myObj, callback);
    

    问题是我忘记将 .val() 添加到 $('#myInputField'); 的末尾。此操作让我浪费时间试图找出问题所在,导致非法调用错误,因为 $('#myInputField') 与系统指出的文件不同输出不正确的代码。希望这个答案能帮助遇到同样错误的人避免浪费时间。

    【讨论】:

      【解决方案5】:

      在我的情况下,参数列表中存在错误,格式不正确。 因此,请确保参数格式正确。 例如正确的参数格式

      data: {'reporter': reporter,'partner': partner,'product': product}
      

      【讨论】:

        猜你喜欢
        • 2019-04-29
        • 1970-01-01
        • 1970-01-01
        • 2017-06-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多