iframe 文件上传和 NoScript 插件答案

【问题标题】：Iframe file uploading and NoScript pluginiframe 文件上传和 NoScript 插件
【发布时间】：2011-12-03 13:27:12
【问题描述】：

我有一个带有 ajax 文件上传的表单。 Javascript 使用表单创建 iframe，将输入与文件一起移动到表单中并提交表单。

这没有任何问题，但是 Firefox 中流行的 NoScript 插件认为它是 XSS 并将我的 POST 请求转换为 GET。所以它不起作用。有没有办法规避这个问题？

代码（使用 jQuery）

function add_input_file(div) {
  var input = $("<input>").attr("type", "file").attr("name", "file");
  input.appendTo(div);
  input.change(function() {
    $(this).off();
    var iframe = $("<iframe>");
    iframe.appendTo($("body"));
    iframe.load(function() {
      $(this).off();
      var input = $(this).data("input");
      var form = $("<form>").attr("method", "post").attr("action", "/send").attr("enctype", "multipart/form-data").attr("accept-charset", "UTF-8");
      form.appendTo($(this).contents().find("body"));
      input.appendTo(form);
      add_input_file($("#att"));
      form.submit();
    });
  });
}
$(function() {
  add_input_file($("#att"));
})

【问题讨论】：

能贴出javascript代码吗？
与其动态创建 IFrame 和 Form，不如将它们作为页面 HTML 的一部分
问题是上传文件的数量可能不同。所以我必须动态地制作 iframe。
您是否尝试为 iframe 设置源？目前它没有，所以 noscript 可能会认为它是跨站点的，因为 iframe 的 src 没有指向同一个站点。
@Ximik 此代码根本不适用于 NoScript，此代码是 java- script 等等...所以没有解决您的问题的方法这仍然为您提供了一个动态的多上传器。你需要脚本，而 NoScript 正在阻止脚本。

标签： javascript noscript

【解决方案1】：

这不是代码修复，但我使用此 jQuery form plugin 进行 ajax 上传。我已经在安装了 Firefox 和 NoScript 的情况下测试了 sample，一切正常。

如果您不想使用自定义插件，请查看source code 了解它是如何完成的。

【讨论】：

这个插件使用了 HTML5 的特殊期货。所以它在旧浏览器中不起作用（对于旧浏览器，它使用 iframe，就像我的代码一样）。
你试过了吗？也许他们做了一些稍微不同的事情，使其也适用于旧浏览器。
事实上我的代码是基于这个插件的。我刚刚删除了所有使用 javascript 文件访问而不是 iframe 的内容。

【解决方案2】：

我建议你在<noscript>显示一个简单的文件形式，因为脚本已经关闭，你不能通过使用更多的脚本来解决问题。

【讨论】：