Question

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

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

因此，如果您在文件对话框中按确定，则应上传图像。除了这个，我做了一切。我想将图像保存在名为＆＃34; images＆＃34;的文件夹中。在我的服务器上。我想将图像的名称保存到我的数据库中，以便稍后再调用它们。如何通过AJAX和PHP实现这一点，如何检查该图像的格式，以便用户无法上传其他文件而不是图像？

Answer 1

首先，您必须在image元素上设置事件侦听器。我将以原生javascript为例给你一个例子，因为它比jQuery快一些，并且使用javascript框架的负载（如果你还没有使用它）是太沉重了。将数百KB的jQuery Framework与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 FormData API和XHR Object在所有现代浏览器中都可以使用最新的三个主要版本。接下来，我们在文件节点上放置一个事件监听器，因此每次用户选择文件时都会触发change事件。使用File API，我们获取文件并循环遍历所有文件。您可以在此处对mime类型和大小执行多项检查。如果文件有效，请使用xhr对象上传它。

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

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

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

1 个答案: