将多部分表单发布到外部 URL php答案

【问题标题】：Posting multipart form to external URL php将多部分表单发布到外部 URL php
【发布时间】：2016-01-20 15:06:39
【问题描述】：

在我的页面中，我有一个表单可以在提供 api、upload.im 的外部服务上上传照片，我需要取回上传图片的 URL。我真的无法让它工作......

此 api 的文档页面是 here。

我在我的 PHP 页面中添加了一个表单：

<form enctype="multipart/form-data" name="UploadForm" id="UploadForm" action="http://uploads.im/api" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <input type="file" name="upload" id="upload" />
    <input type="hidden" name="resize_width" id="resize_width" value="" />
    <input type="hidden" name="thumb_width" id="thumb_width" value="250" />
    <input type="hidden" name="format" id="format" value="xml" />
    <input type="submit" id="Submit" name="Submit" />
</form>

我也尝试使用这个 jQuery 代码来提交带有所选图像的表单：

$(document).ready(function () {
    $('#UploadForm').on('submit', function(e) {
        e.preventDefault();
        var data = new FormData(jQuery('UploadForm')[0]);
        jQuery.ajax({
            url: 'http://uploads.im/api',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                console.log(data);
            }
        });
    });
});

使用此代码，我在控制台中收到错误：哪个是来自 API 的错误代码；这意味着代码可以工作，但是提交表单的方式有问题。问题出在哪里？

谢谢！

【问题讨论】：

表格没问题，问题出在js代码中，我正在尝试修复。
不应该把e.preventDefault();放在最后吗？
另外你为什么使用jQuery('UploadForm')[0]而不是$(this)[0]，以及jQuery.ajax而不是$.ajax？
通过参考检查我的答案

标签： javascript php jquery forms

【解决方案1】：

这里，我只是对JS代码做了一些改动：

$(document).ready(function () {
    $('#UploadForm').on('submit', function(e) {
        e.preventDefault();
        var data = new FormData($(this));
        data.append('upload', $('#upload')[0].files[0]);

        jQuery.ajax({
            url: 'http://uploads.im/api',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                console.log(data);
                console.log(data.data.thumb_url);
                console.log(data.data.img_url);
            }
        });
    });
});

【讨论】：

表单的名称是UploadForm。写var data = new FormData($('#upload'));对不对。我认为应该是UploadForm 而不是upload...
您甚至可以使用 $(this) 代替 $('#UploadForm')，但在 firefox 中仍然无法使用。
我已经更新了你的答案，添加了在 Firefox 和 Chrome 中都可以使用的代码。谢谢！

【解决方案2】：

问题可能与这一行有关：

var data = new FormData(jQuery('UploadForm')[0]);

应该是#UploadForm。

【讨论】：

您的代码似乎有效。我在 JS 控制台中得到一个XMLDocument。我怎样才能读到这个？
@PWhite 尝试双击 XMLDocument。

【解决方案3】：

尝试如下。

var data = new FormData( $('#UploadForm') );

将节点传递给 FormData 构造函数： FormData() 构造函数创建一个新的 FormData 对象

参数：一个 HTML <form> 元素 — 指定时，FormData 对象将填充表单的当前键/值。它还将对文件输入内容进行编码。

参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

【讨论】：

我在 JS 控制台中收到错误代码：TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.