在文件对话框 AJAX 和 PHP 中选择后立即上传图像答案

【问题标题】：Upload image immediately after selected in file dialog AJAX and PHP在文件对话框 AJAX 和 PHP 中选择后立即上传图像
【发布时间】：2016-11-28 17:48:04
【问题描述】：

我正在制作一个网络应用程序，允许用户输入某些信息并从他的计算机中选择一个图像，并且每当他选择他的图像并按下确定时，该图像应该立即上传。

<p>Upload image: <input type="file" name="imageToUpload" id="image" accept="image/*" /></p>

因此，无论您在“文件”对话框中按“确定”，都应该上传图像。除了这个，我什么都做了。我想将图像保存在服务器上名为“images”的文件夹中。我想将图像的名称保存到我的数据库中，以便以后可以调用它们。这是如何通过 AJAX 和 PHP 完成的，我如何检查该图像的格式，以便用户不能上传另一个文件而不是图像？

【问题讨论】：

你尝试过什么？
@MayankPandeyz 好吧，我尝试了上传图像的经典方式，方法是选择文件并按下按钮上传该图像。但是每当我选择图像并在文件对话框中按“确定”时，我都需要以某种方式将其上传。
文件对话框中没有OK类型的东西，要么你必须做一个上传按钮，要么使用输入文件的更改事件
对不起，我的意思是打开按钮。好的，谢谢，我会尝试并报告：D

标签： javascript php jquery ajax image

【解决方案1】：

首先，您必须在图像元素上设置一个事件侦听器。我会给你一个原生 javascript 的例子，因为它比 jQuery 快几倍，而且使用 javascript 框架（如果你不使用它的话）的负载太重了。将数百 KB 的 jQuery 框架与 5kB 的原生解决方案进行比较。

我们开始吧：

<input type="file" name="imageToUpload" id="image" accept="image/*">
<script>
    var fileNode = document.querySelector('#image'),
        form = new FormData(),
        xhr = new XMLHttpRequest();

    fileNode.addEventListener('change', function( event ) {
        event.preventDefault();

        var files = this.files;
        for (var i = 0, numFiles = files.length; i < numFiles; i++) {
            var file = files[i];

            // check mime
            if (['image/png', 'image/jpg'].indexOf(file.type) == -1) {
                // mime type error handling
            }

            form.append('my-files[]', file, file.name);

            xhr.onload = function() {
                if (xhr.status === 200) {
                    // do sth with the response
                }
            }

            xhr.open('POST', 'upload.php');
            xhr.send(form);
        }
    });
</script>

我在这里做了什么？简而言之：我正在使用 JavaScript 本机 FormData API 和 XHR Object ，它们适用于最新三个主要版本的所有现代浏览器。接下来，我们在文件节点上放置一个事件监听器，因此每次用户选择文件时都会触发更改事件。使用File API，我们可以获取文件并遍历所有文件。您可以在此处对 mime 类型和大小执行多项检查。如果文件有效，请使用 xhr 对象上传。

您的upload.php 文件应该再次进行所有安全检查。检查 $_FILES 数组中的 mime 类型、大小和错误成员。在示例中，文件存储在 $_FILES['my-files'] 中。

如果你想要拖放支持和进度条，只需看看我几天前写的this example。看看网站的源代码吧。

【讨论】：