TL; DR：）

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

执行代码块后，它只显示paraemters为目标文件，php无法解析它！

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

Answer 1

TL; DR：）

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

让我们假设我们有一个输入

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

NOTA BENE

FormData在iOS / MacOS上限制了功能（AFAIK，只有FormData.append(...)存在），所以要小心。

通过一些小的修改，您可以在另一个用户的操作之后发送文件（例如，按钮单击或其他内容）。希望，我的回答对你有用：）

是的，我在记忆中写了答案而没有测试代码。它应该工作，但可能会有一些错误：）

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

1 个答案:

TL; DR：）

NOTA BENE