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

Question

我正在尝试使用类型="file"的 HTML 输入读取图像。用户选择文件后，我希望向特定 URL 发出 POST 请求。此 POST 请求应包含用户选择的图像。我研究过 jQuery Ajax 调用，但没有成功。我试图点击的链接需要一个字节数组形式的图像。

Answer 1

试试这个:

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