1

我正在尝试创建一个 Web API，允许某人（最好是一个程序）提交一个大型二进制文件并接收该文件的 ID 作为回报。我有一些带有表单 ( method="POST") 的 HTML 和一个<input type="file" ...>可以使用标准 multipart/form-data MIME 类型将文件提交到某些 PHP 代码的元素。PHP 生成 ID 并将其作为结果打印出来。因为 PHP 只是打印 ID，而不是重定向到另一个 HTML 页面或生成 HTML 本身，所以它不是很漂亮，但希望对于程序化文件提交 API 的预期用例来说已经足够了。

到现在为止还挺好。当我想让客户端代码捕获返回的 ID 并使用它调用其他 API 时，这会变得很棘手。如果客户端是带有 JavaScript 的网页，客户端似乎应该使用XMLHttpRequest，但我不清楚如何让该对象使用用户通过文件输入控件选择的文件。

我希望相同的 API 既可以用于手动操作的 Web 表单（便于 UI 和测试），也可以用于纯编程调用（如 JavaScript、curl/libcurl 等）。我不希望 PHP 使用查询字符串中的 ID 重定向到另一个页面，并且我不希望直接返回 HTML。我只想要一个简单的文件，ID out API。

由于这被证明是困难的，我怀疑我做错了事情。我对替代设计持开放态度，但我更愿意让事情尽可能简单。我发现了一个有点类似的问题，但它过于以 Java 为中心，并不能完全解决我的问题。

4

2 回答 2

1

我不得不做类似的事情，我最终做的是将表单提交到隐藏的 iframe。然后可以简单地在 iframe onload 处理程序中检索来自 php 的响应。

事实上，这是我使用的代码：

    $('submitdestination').onload=function(){
        var appID=this.contentDocument.body.children[0].innerHTML;
        //did something with appID
        new mBox.Notice({type: 'ok',delayClose: 1000,content: 'Data saved.',position: {y: 'bottom',x: 'right'}});//displayed message
    }
    $('cvdetails').submit();

注意：submitdestination是我的 iframe。cvdetails是我的形式。表单的目标设置为submitdestination。另外，我正在使用 Mootools，以防有人注意到我的美元参数中缺少散列。

这是我使用的 HTML 的精简版（尽管 iframe 没有改变）：

<form id="cvdetails" name="cvdetails" action="scripts/upload.php" method="post" enctype="multipart/form-data" target="submitdestination" autocomplete="off">
    <button type="button" id="save" class="mainbutton">Save</button>
</form>
<iframe id="submitdestination" name="submitdestination" style="display:none" ></iframe>

保存按钮有一个点击处理程序，可以简化为：

$('save').addEvent('click',function(evt){evt.stop();$('cvdetails').submit();})
于 2012-10-15T06:17:52.190 回答
0

感谢@Asad 的帮助，我能够按照我想要的方式进行工作。把它们放在一起，我基本上有这个代码：

<html>
    <head>
        <script type="text/javascript">

window.onload = function(){
    setUploadID(-1);
    document.getElementById('hidden_iframe').onload = captureUploadID;
}

function setUploadID(id)
{
    document.getElementById('upload_id').innerHTML = id;
}

function captureUploadID()
{
    var upload_id = this.contentDocument.body.childNodes[0].textContent;
    setUploadID(upload_id);
}
        </script>
    </head>
    <body>
        <form action="upload.php" enctype="multipart/form-data" method="POST" target="hidden_iframe">
            File: <input type="file" name="media" /><br>
            <input type="submit" value="Upload" />
        </form>
        <br>
        Upload ID: <span id="upload_id"></span>
        <iframe id="hidden_iframe" style="display: none;"></iframe>
    </body>
</html>
于 2012-10-16T19:20:25.750 回答