Javascript 在文件对话框AJAX和PHP中选择后立即上载图像

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

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

因此，在“文件”对话框中按“确定”时，应上载图像。 除了这个，我什么都做了。我想将图像保存在服务器上名为images的文件夹中。我想把这些图片的名字保存到我的数据库里，这样我以后可以回忆起它们。

---

这是如何通过AJAX和PHP实现的？我如何检查图像的格式，以便用户不能上传另一个文件而不是图像

首先，必须在图像元素上设置事件侦听器。我将给你一个原生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 native，wich可以在所有现代浏览器中使用最新的三个主要版本。接下来，我们在文件节点上放置一个事件侦听器，这样每次用户选择文件时都会触发更改事件。通过使用，我们获取文件并循环浏览所有文件。您可以在此处对mime类型和大小执行多个检查。如果文件有效，请将其与xhr对象一起上载

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

---

如果你想要拖放支持和进度条，只要看看我几天前写的。请看一下该网站的源代码。

您尝试了什么？@MayankPandeyz我尝试了上传图像的经典方法，选择文件并按下按钮上传图像。但是每当我选择图像并在“文件”对话框中按“确定”时，我需要以某种方式使其上载。在“文件”对话框中没有“确定”类型的内容，您必须创建上载按钮或使用输入文件的更改事件。我指的是“打开”按钮。好的，谢谢。我会试试看，然后报告：D