Question

JS和PHP专家：）

它＆＃39;我一直在努力尝试使用PHP和JS将图像上传到我服务器中的uploads文件夹，所以我需要一些帮助（我是新手）。

这是我的代码：

signup.php - 我从计算机中选择一张图片并将其显示在页面中：

<img id="avatar-img" class="img-responsive" src="assets/img/user_avatar.png" height="64" width="64" />

</div>



    <div class="fileupload-preview fileupload-exists thumbnail" style="height: 120px; width: 120px"></div>

    <span class="btn btn-file btn-info">
    <span class="fileupload-new">Select image</span>
    <span class="fileupload-exists">Change</span>

    <!-- ImageData input -->
    <input id="imageData" name="file" type="file" accept="image/*"/>

    ...

<!-- Image Reader JS function -->
            <script >

            document.getElementById("imageData").onchange = function () {
                var reader = new FileReader();
                reader.onload = function (data) {

                    document.getElementById("avatar-img").src = data.target.result;
                    console.log(data.target.result);
                };

                // Read the image file as a data URL.
                var blob = (window.URL || window.webkitURL).createObjectURL(this.files[0]);
                document.getElementById('fileURL').value = blob;



                // Upload the selected image automatically into the 'uploads' folder
                var filename = "avatar.jpg";
                var data = new FormData();
                data.append('file', blob);

                $.ajax({
                    url :  "upload.php",
                    type: 'POST',
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        alert(data);

                    }, error: function() {
                        alert("Something went wrong, try again!");
                    }
                });
            };       
</script>

在此 signup.php 文件中，选择图片后，我成功地在输入文本字段中获得blob:http链接，例如：blob:http://www.example.com/7d5aac71-5eb5-41b3-a14e-e1ae680eb337

注意：检查下面的图片，它会显示输入文本字段稍后隐藏，现在它仅用于测试目的：

这是 upload.php 文件：

<?php 

    if ($_FILES["file"]["error"] > 0) {
        echo "Error: " . $_FILES["file"]["error"] . "<br />";
    } else {
        move_uploaded_file($_FILES["file"]["tmp_name"],"uploads/" . $_FILES["file"]["name"]);

        // Get fileURL path and show success alert
        global $fileURL;
        $fileURL = "uploads/" . $_FILES["file"]["name"];

        echo $fileURL;

  }

?>

所以， upload.php 文件中可能存在错误，我不知道，因为 signup.php 会显示警告仅在我选择了一张图片"uploads/"之后说echo来自 upload.php ，但如果我输入上传文件夹，我看不到图片。

注意：我的上传文件夹不在我服务器的根目录中，但它位于托管我所有PHP文件的目录的根目录中，类似于{{1所以上传文件夹的链接是http://example.com/mysitename。

任何帮助都可以节省我的一天：D

提前致谢！

Answer 1

您好我只更改了

的3个代码块

if (document.getElementById('imageData').files[0]) {
    reader.readAsDataURL(document.getElementById('imageData').files[0]);
}

而不是

var blob = (window.URL || window.webkitURL).createObjectURL(this.files[0]);
document.getElementById('fileURL').value = blob;

并在prview onload事件中移动你的ajax请求

document.getElementById("avatar-img").onload = function () {
        // Upload the selected image automatically into the 'uploads' folder
        var filename = "avatar.jpg";
        var data = new FormData();
        data.append('file', document.getElementById('imageData').files[0]);


        $.ajax({
            url :  "upload.php",
            type: 'POST',
            data: data,
            contentType: false,
            processData: false,
            success: function(data) {
                alert(data);

            }, error: function() {
                alert("Something went wrong, try again!");
            }
        });
    };

并在data.append中正确使用文件元素

data.append('file', document.getElementById('imageData').files[0]);

您可以看到完整的代码块

document.getElementById("imageData").onchange = function () {
var reader = new FileReader();
reader.onload = function (data) {

    document.getElementById("avatar-img").src = data.target.result;
    console.log(data.target.result);
    document.getElementById("avatar-img").onload = function () {
        // Upload the selected image automatically into the 'uploads' folder
        var filename = "avatar.jpg";
        var data = new FormData();
        data.append('file', document.getElementById('imageData').files[0]);


        $.ajax({
            url :  "upload.php",
            type: 'POST',
            data: data,
            contentType: false,
            processData: false,
            success: function(data) {
                alert(data);

            }, error: function() {
                alert("Something went wrong, try again!");
            }
        });
    };
};
if (document.getElementById('imageData').files[0]) {
    reader.readAsDataURL(document.getElementById('imageData').files[0]);
}
/*// Read the image file as a data URL.
var blob = (window.URL || window.webkitURL).createObjectURL(this.files[0]);
document.getElementById('fileURL').value = blob;
*/
};

如何使用blob将图像上传到文件夹：http链接php和javascript

1 个答案: