提交表单，包括通过 jQuery ajax 上传文件答案

【问题标题】：Submit form including file upload via jQuery ajax提交表单，包括通过 jQuery ajax 上传文件
【发布时间】：2015-05-28 16:33:31
【问题描述】：

HTML：

<input type="text" name="description">
<input type="file" name="image" accept=".jpg">

如何使用$.ajax 上传图片和文字值？生成提交文本数据的对象没有问题，但不知道从哪里开始。

我使用的是PHP服务器端，所以用base64或类似方法编码图像是完全可以接受的。

【问题讨论】：

您在 jQuery 和 Ajax 方面的知识水平究竟如何？除非您真的是这些方面的新手，否则只需将 jQuery 事件绑定到表单的提交并在那里调用 Ajax 帖子即可轻松完成...
@lucasnadalutti 我怎样才能提交图片？
如果您通过 Ajax 发送此数据，则该图像将与您的表单数据一起发送。还有一些 JS 上传库。如果您认为使用它们更好，我推荐这个：plupload.com
@lucasnadalutti 我真的不想为应该如此简单的东西添加另一个库。
检查这个 - stackoverflow.com/questions/27740085/…

标签： php jquery html

【解决方案1】：

使用FormData() 类最简单：

所以现在您有了一个 FormData 对象，可以与 XMLHttpRequest 一起发送。并使用 FormData 对象附加字段

<script type="text/javascript">
           $(document).ready(function () {
               var form = $('form'); //valid form selector
               form.on('submit', function (c) {
                   c.preventDefault();

                   var data = new FormData();
                   $.each($(':input', form ), function(i, fileds){
                       data.append($(fileds).attr('name'), $(fileds).val());
                   });
                   $.each($('input[type=file]',form )[0].files, function (i, file) {
                       data.append(file.name, file);
                   });
                   $.ajax({
                       url: '/post_url_here',
                       data: data,
                       cache: false,
                       contentType: false,
                       processData: false,
                       type: 'POST',
                       success: function (c) {
                            //code here if you want to show any success message
                       }
                   });
                   return false;
               });
           })
</script>

并强制 jQuery 不为您添加 Content-Type 标头，否则会丢失上传文件边界字符串。

【讨论】：

【解决方案2】：

使用 jQuery 表单 js 使用 ajax 上传图片。

查看https://github.com/malsup/form/

var options = {
   url     : 'url',
   success : function(responseText) { "event after success "}
};

$(" form id ").ajaxSubmit(options);

在php文件中获取图片并上传图片

【讨论】：