如何使用input type = file读取图像并将此图像作为POST请求发送

时间:2017-04-18 06:13:34

标签: javascript jquery html ajax post

我正在尝试使用type ='File'的HTML输入来读取图像。在用户选择文件后,我希望对特定URL发出POST请求。此POST请求应该具有用户选择的图像。 我已经研究过jQuery Ajax调用但没有任何成功。我试图点击的链接期望图像为字节数组。

1 个答案:

答案 0 :(得分:2)

试试这个:

HTML:

<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>

Jquery的:

$('#upload').on('click', function() {
    var file_data = $('#pic').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);

    $.ajax({
            url         : 'upload.php',     // point to server-side PHP script 
            dataType    : 'text',           // what to expect back from the PHP script, if anything
            cache       : false,
            contentType : false,
            processData : false,
            data        : form_data,                         
            type        : 'post',
            success     : function(output){
                alert(output);              // display response from the PHP script, if any
            }
    });
});