javascript - 使用 ajax jquery 和 php 管理文件上传

Question

以前在开发系统时，每当我遇到通过 ajax 将图像上传到服务器的情况时，我经常使用不同的插件，但现在我必须创建一个自定义的界面，我必须从头开始制作一切!

我的页面上有一个输入类型文件，我正在做的是通过 ajax 将图像上传到服务器!

现在我已经开发了一个片段让我先给你看代码!

html

    <form method="post" id="myform" action="#">
    <div class="image" id="upload-parent">
                                                <input id="upload-image" type="file" name="myfile" accept="image/x-png, image/gif, image/jpeg, image/jpg"/>
                                                <label for="upload-image">+</label>
                                            </div>
</form>

Jquery/Javascript

$("#upload-image").change(function(){
            readURL(this);



//            getting file size and type

//            console.log(this.files[0].type);
//            console.log(this.files[0].size);

//        size in bytes /124 for kb

        });

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {

                    $append='<div class="image">'+
                        '<img src="'+reader.result+'" class="img-responsive"/>'+
                        '</div>';

                    $($append).insertBefore("#right-panel .social #max-width #social #upload #images-block #upload-parent");

                    $.ajax({
                        type: 'post',
                        url: 'upload_file_test.php',
                        data: new FormData($("#myform")[0]),
                        contentType:false,
                        processData:false,
                        success: function (data) {

                        }
                    });
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

PHP

<?php
if(isset($_FILES['myfile']['name'])){
    echo "set";

    $target = "uploads/"; //make sure to create a folder named 'uploads' and put it in the same directory that upload.php (this script) is in
    $file_name = $_FILES['myfile']['name'];
    $tmp_dir = $_FILES['myfile']['tmp_name'];

    if(!preg_match('/(gif|jpe?g|png|csv)$/i', $file_name) //set permissible file types
    )
    {
        echo "sorry that file type is not allowed";
    } else {
        move_uploaded_file($tmp_dir, $target . $file_name);
    }
}
else
{
    echo "not set";
}



?>

如果其他人在创建上述场景时遇到问题，此代码可以 100% 正常工作!

这段代码所做的是改变图片上传，它预览图片，然后将图片上传到服务器。

问题!

正如你所看到的，我现在正在使用表单数据对象将图像发送到后端，对于这个特定的场景，我将始终需要在页面内有一个表单，而且当输入类型文件是动态的时，这个对象方法可能会产生问题生成!或者假设我有 50 个输入类型文件，我只想将一个特定的输入类型文件发送到后端而不是全部!因为现在它会将所有内容发送到服务器，如果我只想发送一个特定文件，这绝不是一种有效的方法，为什么要将所有内容都发送到后端？

我确实对此进行了很多研究，我可以看到 formdata 对象为我们做了很多开箱即用的图像处理工作!我想要的是获取特定的输入文件(最有可能使用文件读取器 API)并对其进行处理，然后仅将该特定项目发送到后端!这就是我要在这里实现的目标!

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {

                    $append='<div class="image">'+
                        '<img src="'+reader.result+'" class="img-responsive"/>'+
                        '</div>';

                    $($append).insertBefore("#right-panel .social #max-width #social #upload #images-block #upload-parent");

                    $.ajax({
                        type: 'post',
                        url: 'upload_file_test.php',
                        data: "myfile="+reader.result,
                        contentType:false,
                        processData:false,
                        success: function (data) {

                        }
                    });
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

执行代码块后，它只显示了目标文件的参数，而 php 无法解析它!

有人可以指导我如何在不使用 formdata 对象的情况下将独立图像发送到后端吗？

Answer 1

长话短说:)

您可以通过它的 onChange 事件轻松处理不同的 input[type=file]

假设我们有一个输入

<input type="file" id="myAwesomeFilepicker" />

我们想在用户选择文件时发送文件，所以我们添加了一个事件监听器(我不喜欢 jQuery，所以我会写一些普通的 JS，希望你能理解):

document.getElementById("myAwesomeFilepicker").addEventListener("change", function(event) {
    var input = event.target
    if (input.files.length > 0) {
        // create an empty FormData instance
        var formData = new FormData()

        // Iterate through picked files
        for (var i = 0; i < input.files.length; i++) {
            var file = input.files[i]
            // append file to the FormData instance
            formData.append(file.name, file)
        }

        /* 
            At this point you can just send formData through AJAX 
            and handle it by your PHP script 
        */

        // Don't forget to clear input
        input.value = ""
    } else {
        // process 0 files picked, if you wish
    }
})

---

注意了

FormData 在 iOS/MacOS 上的功能受限(据我所知，只有 FormData.append(...) 存在)，所以要小心使用它。

---

通过一些小的修改，您可以让文件在其他用户的操作(例如，单击按钮等)之后发送。希望，我的回答对你有用:)

---

是的，我凭内存写了答案，没有测试代码。它应该可以工作，但可能会出现一些错误:)