如何通过 xhttp“发布”图像？答案

【问题标题】：How to 'POST' a image through xhttp?如何通过 xhttp“发布”图像？
【发布时间】：2017-01-17 00:17:57
【问题描述】：

我正在尝试这样做：

var http = new XMLHttpRequest();
    var url = "guardarImg.php";
    var params = $('#form').serialize();
    http.open("POST", url, true);
    http.setRequestHeader("Content-type", "multipart/form-data");
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(params);

但不起作用，它在我的 php 中显示“图像”未定义，但是当我通过平均提交时它工作正常。

我看到的所有类似示例都适用于字符串数据，但我需要用图像来实现它，以便稍后在英特尔 XDK 中工作

我做错了什么？能给我看个样品吗？

对不起，如果我的问题太基本了，我是一个 xmlhttp 和 ajax 东西的菜鸟。

【问题讨论】：

看起来您已经在使用 jQuery。您不只是使用他们的 Ajax 方法而不是自己序列化它有什么特别的原因吗？
谢谢，我告诉过我，我对这些东西很感兴趣，我正在学习一些我发现可以学习的例子。你有我可以申请的样本吗？

标签： ajax post xmlhttprequest intel-xdk

【解决方案1】：

您对 $("#form").serialize() 的想法是正确的，但对于（仍然）AJAX 上传的混乱。糟糕（我很惭愧第一次没有注意到那个细节：-（）。

通过 AJAX 上传文件的问题是（通常情况下）Internet Explorer。基本上，它直到 IE10 才支持 FormData 对象（这意味着，如果您关心支持 XP 用户，他们最好运行非 IE）。 FormData 大大简化了通过 AJAX 上传东西的过程；如果你没有，这里是你的选择：

在页面上放置一个小小的 IFRAME，并为实际的文件上传进行管理。
使用 JSON 等以编程方式对表单数据进行编码，然后通过 jQuery 发送。
使用 nice plugin 为您包装这一切（并在幕后使用这些技术中的一种或多种）。

我将假设您不关心 IE8/9（几乎其他所有人都不是问题）并为您提供 FormData 解决方案。与之前的编辑不同，我在这里弹出整个函数，因为它提供了相当多的信息。这种特殊的解决方案会上传整个表单，将现有字段拉入 FormData 对象并特殊处理文件。

<!-- Many ways to skin this particular feline; I like this one :-) -->
<form onsubmit="return uploadFiles(this)">
  <!-- Access from PHP using $_FILES["somefile"]["name"][$idx]... -->
  <input type="file" name="somefiles" multiple="1" />
</form>

<script>
  // Function to upload a form via FormData, breaking out files and cutting
  // any non-named elements.  Assumes that there's a #status DIV and the
  // URL is hardcoded.
  function uploadFiles(frm) {
    var formdata = new FormData();
    // I'm doing this to separate out the upload content.  Note that multiple
    // files can be uploaded and will appear as a decently-friendly PHP array
    // in $_FILES.  Note also that this does handle multiple files properly
    // (a default FormData(frm) wouldn't exactly :-( ).
    $(frm).find(":input").each(function(idx, ele) {
      // This is a file field.  Break it out.
      if(ele.files) {
        for(i=0; i<ele.files.length; i++) {
          formdata.append(ele.name + "[" + i + "]", ele.files[i]);
        }
      // Not a file element, so put in the upload iff there's a name.
      } else if(ele.name) {
        formdata.append(ele.name, ele.value);
      }
    });
    // Run the AJAX.
    $.ajax({
      url: "test.php",        // Change Me :-)
      type: "POST",
      data: formdata,
      processData: false,     // Need these to keep jQuery from messing up your form
      contentType: false,
      success: function(data) {
                 $("#status").html(data);
               },
      error: function(xhr, status, error) {
                 $("#status").html("Error uploading file(s): " + error);
             },
    });
    return false;    // Keep the form from submitting
  }
</script>

我有一个完整的 HTML 文件和相应的 PHP，它们在 pastebin 工作。

如果我是你，如果可以的话，我实际上只会使用Sebastian's jQuery File Upload。它拥有现代 UI 的所有优点（包括进度计量）、浏览器抽象，并且获得了 MIT 许可启动。也就是说，如果您只需要一些东西来复制意大利面，这个答案会让您上路。祝你好运！

【讨论】：

感谢 BJ 的努力，但是当我尝试将您的 sn-p 应用于一张图像（输入类型文件）时，没有任何反应。
答案几乎完全重写，因为我是个傻瓜，错过了你想要文件上传的细节。祝你好运！
非常感谢，它现在可以工作，但不能在 Intel XDK 中工作，我看到了很多文档，我在这里看到：stackoverflow.com/questions/39401543/… 现在无法在该框架中使用 php 所以我决定使用 IndexedDB 存储图像。再次感谢。