Question

我在HTML中有一个input文件来上传图片

<input type="file" id="upload-image">

我想将我的图像上传到我的本地Apache webserver，使用AJAX，就像这样

$('#upload-image').change(function(e){
        var file = e.target.files[0];
        var imageType = /image.*/;
        if (!file.type.match(imageType))
            return;
        var form_data = new FormData();
        form_data.append('file', file);
        console.log(form_data);
        $.ajax({
            url: 'http://localhost/upload.php',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function(response){
                console.log(response);
            },
            error: function(error){
                console.log(error);
            }
        });
    });

我已将upload.php移至/var/www/html/，当我在浏览器上访问它时，它确实存在于我的本地网络服务器上。但是当我尝试上传我的图片时，浏览器会抛出此错误：

XMLHttpRequest cannot load http://localhost/upload.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

这是我的upload.php：

<?php
header('Access-Control-Allow-Origin: *');
if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
?>

我以为我已经添加了Access-Control-Allow-Origin标题然后它会起作用。我怎样才能使它发挥作用？

Ajax在localhost PHP中上传图像

0 个答案: