Question

您好我已经搜索了很多关于如何直接从浏览器上传的内容，就像在this forum使用Stripe with Google App Engine一样。此外，Stripe文档建议可以按照建议here直接从浏览器上传。

我一直在尝试使用AJAX，但是出于安全考虑，我似乎无法获得本地文件的路径。下面的代码显示了我最接近的代码，但是我不知道如何在不触及服务器的情况下通过浏览器上传图像。控制台返回错误＆＃34;无效文件：必须在multipart / form-data请求中上传＆＃34;。

接下来我将尝试使用Jquery Form Plugin，但我不知道我是否会取得任何成功。

    var formData = new FormData($('#theHTMLForm')[0]);
    var sendarray={purpose:"identity_document", file:formData};
    sendarray=JSON.stringify(sendarray);

            $.ajax({
        type:'POST',
        url: 'https://uploads.stripe.com/v1/files',
        data: sendarray,
        mimeType: "multipart/form-data",
        headers: {
            "Authorization": "Bearer STRIPEPUBLISHABLEKEY"
        },
        contentType: 'application/json',
        processData: false,
        success:function(data){
            alert('success');
            console.log(data);
        },
        error: function(data){
            alert('error');
            console.log(data);
        }
    });

Answer 1

感谢this forumn上非常善良的人，我能够让它发挥作用！我会在这里复制答案，以防任何人来寻找相同的答案。

HTML

<div>
<form method="post" id="fileinfo" name="fileinfo" ajax="true">
    <input type="file" id="file-box" name="file" required />
    <input type="submit" value="Upload" />
</form>
</div>

<div>
    <div id='label-results'>...</div>
    <pre id="upload-results"></pre>
</div>

和Javascript

$('#fileinfo').submit(function(event) {
    event.preventDefault();

    var data = new FormData();

    var publishableKey = 'pk_test_***';

    data.append('file', $('#file-box')[0].files[0]);
    data.append('purpose', 'identity_document');

    $.ajax({
        url: 'https://uploads.stripe.com/v1/files',
        data: data,
        headers: {
            'Authorization': 'Bearer ' + publishableKey
        },
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
    }).done(function(data) {
        $('#label-results').text('Success!');
        $('#upload-results').text(JSON.stringify(data, null, 3));
    }).fail(function(response, type, message) {
        $('#label-results').text('Failure: ' + type + ', ' + message);
        $('#upload-results').text(JSON.stringify(response.responseJSON, null, 3));
    });

    return false;
});

使用Google App Engine进行条纹化 - 使用Javascript直接通过浏览器上传图像以进行管理帐户身份验证

1 个答案: