不能限制文件数量并将其保存到数据库，图像上传器Javascript和PHP

Can't limit number of files and save it to database, Image uploader Javascript and PHP

本文关键字：图像数据库 PHP Javascript 保存文件不能更新时间：2023-09-26

首先我是Javascript新手，让我告诉你我需要什么。

我有这个代码使图像上传器在客户端调整它的大小和工作完美，由Joel Vardy制作。但我需要将上传的图片数量减少10张。我想不出该怎么做。另外，我找不到一种方法来通过php

在数据库上托管图像链接HTML

<head>
    <title>Upload Photos</title>
    <link rel="stylesheet" href="./style.css" />
<head>
<body>
    <h1>Upload Photos</h1>
    <form>
        <input type="file" accept="image/*" multiple />
        <div class="photos">
        </div>
    </form>
    <script src="./upload.js"></script>
</body>

JS

document.querySelector('form input[type=file]').addEventListener('change', function(event){
var files = event.target.files;
// Iterate through files
for (var i = 0; i < files.length; i++) {
    // Ensure it's an image
    if (files[i].type.match(/image.*/)) {
        // Load image
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            var image = new Image();
            image.onload = function (imageEvent) {
                // Add elemnt to page
                var imageElement = document.createElement('div');
                imageElement.classList.add('uploading');
                imageElement.innerHTML = '<span class="progress"><span></span></span>';
                var progressElement = imageElement.querySelector('span.progress span');
                progressElement.style.width = 0;
                document.querySelector('form div.photos').appendChild(imageElement);
                // Resize image
                var canvas = document.createElement('canvas'),
                    max_size = 1200,
                    width = image.width,
                    height = image.height;
                if (width > height) {
                    if (width > max_size) {
                        height *= max_size / width;
                        width = max_size;
                    }
                } else {
                    if (height > max_size) {
                        width *= max_size / height;
                        height = max_size;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                // Upload image
                var xhr = new XMLHttpRequest();
                if (xhr.upload) {
                    // Update progress
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = parseInt(event.loaded / event.total * 100);
                        progressElement.style.width = percent+'%';
                    }, false);
                    // File uploaded / failed
                    xhr.onreadystatechange = function(event) {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                                imageElement.classList.remove('uploading');
                                imageElement.classList.add('uploaded');
                                imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
                                console.log('Image uploaded: '+xhr.responseText);
                            } else {
                                imageElement.parentNode.removeChild(imageElement);
                            }
                        }
                    }
                    // Start upload
                    xhr.open('post', 'process.php', true);
                    xhr.send(canvas.toDataURL('image/jpeg'));
                }
            }
            image.src = readerEvent.target.result;
        }
        reader.readAsDataURL(files[i]);
    }
}
// Clear files
event.target.value = '';
});

PHP

$filename = md5(mt_rand()).'.jpg';
$data = file_get_contents('php://input');
$image = file_get_contents('data://'.substr($data, 5));
if ( ! file_put_contents('images/'.$filename, $image)) {
header('HTTP/1.1 503 Service Unavailable');
exit();
}
unset($data);
unset($image);
echo './images/'.$filename;

任何帮助将不胜感激，谢谢!

要限制脚本最多只能处理10个文件，请执行以下操作:

for (var i = 0; i < files.length; i++) {
    if (i < 11){
    }
}