使用ajax将图像上传到php

时间:2014-10-06 22:30:30

标签: jquery ajax image upload

我一直在阅读如何上传一个简单的图像文件.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文件。

问题:我错过了什么。这是我第一次保存图片文件。我不想为此使用插件。如果这是一个愚蠢的问题,请饶恕我。

1 个答案:

答案 0 :(得分:0)

您可以尝试使用formData.append:

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