javascript - 将多部分表单发布到外部 URL php

Question

在我的页面中，我有一个表单可以在提供 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 的错误代码；这意味着代码可以工作，但是提交表单的方式是错误的。问题出在哪里？

谢谢!

Answer 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);
            }
        });
    });
});