使用ajax上传图片到php答案

【问题标题】：uploading image to php with ajax使用ajax上传图片到php
【发布时间】：2014-12-01 06:46:15
【问题描述】：

我一直在阅读如何上传简单的图像文件 .png 文件格式，并且我看到了使用一些很棒的插件的示例。我已经尝试了这些示例，但没有成功。

这是一个简单的例子。场景是：使用 jquery ajax 到 php 单击按钮时上传 simlpe .png 图像。我想将文件对象编码为 json 以将其发送到服务器端。

这是 HTML：

<div id="img_upload_container">
       <form id="data" method="post" enctype="multipart/form-data">
          <input name="image" type="file" />
          <button type="submit" >Submit</button>
       </form>
</div>

javascript：

$("form#data").submit(function(e){
  e.preventDefault();

    var formData = new FormData($(this));
    var data = JSON.stringify({action:'save_picture', 'picture':formData});
    console.log(data)
   var request= $.ajax({
                  url: "http://www.test.dev/picture",
                  type: "POST",
                  data: data,
                  processData: false,
                  contentType:'application/json'
    });
   request.done(function(msg){
    console.log(msg);
   });

});

服务器端：其实这不是问题。我能应付得很好。我正在使用 laravel，它有很好的文件处理选项。我还不知道是否要将其保存在文件系统或 RDBMS 中。所以我只想确保我发送一个有效的文件以供以后操作，无论我最终在服务器端做什么。

问题：Console.log(data) 显示一个空的 formData，尽管我在那里选择了一个有效的 .png 文件。

问题：我错过了什么。这是我第一次必须保存图片文件。我不想为此使用插件。所以如果这是一个愚蠢的问题，请原谅我。

【问题讨论】：

如果这是针对实时站点的（也就是说，它不仅仅是要学习的练习），那么试试这个：jquery upload file plugin。我已经尝试过很多次了，Ravi 的插件非常可靠。我在大量网站上使用它。强烈推荐。
你试过用<input type="submit" value='Submit' />代替<button type="submit" >Submit</button>

标签： jquery ajax image upload

【解决方案1】：

你可以试试 formData.append:

var formData = new FormData();
formData.append('file', input.files[0]);

【讨论】：