Question

我正在制作图库网站，并希望仅使用PHP和MYSQLI创建一个多图像上传器...我在编码方面不是很好，所以本网站上的多个图片上传的其他示例没有为我工作。

以下是根据当前用户会话将数据发布到数据库中的工作代码。

HTML：

<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="image">Select a file:</label>
<input type="file" name="image[]" id="image" multiple='multiple' /> 
<br /><br>
<label for="picname">Title:</label>
<input type="text" name="picname" id="picname" /> 
<br /><br>
<label for="picdesc">Description:</label>
<input type="text" name="picdesc" id="picdesc" /> 
<br /><br>
<label for="piccat">Category:</label>
<select name="piccat" id="piccat">
<option value="--"></option>
<option value="animation">Animation</option>
<option value="illustration">Illustration</option>
<option value="photography">Photography</option>
</select> 
<br /><br>
<input type="submit" name="submit" value="Submit" />
</form>

php＆amp; mysqli的：

<?php
$path = "images/projects/";
include("check.php");

if (isset($_POST["submit"])) {
        $image = $_FILES["image"]["tmp_name"];
        $imageName = $_FILES["image"]["name"];
        $imageSize = $_FILES["image"]["size"];
        $imageType = $_FILES["image"]["type"];
        $imageTitle = $_POST["picname"];
        $imageDescription = $_POST["picdesc"];
        $imageCategory = $_POST["piccat"];
        $len = count($image);
        $path = $path . $imageName;

        $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
        VALUES (?, ?, ?, ?, ?, ?, ?)");
        $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
        $query -> execute();
        $query -> close();          

    if ($imageName){
            move_uploaded_file($image, $path);
            }   
}
?>

工作正常，但只上传一张图片。如何选择多个图像并一次上传所有图像？

Answer 1

使用此

<?php
$path = "images/projects/";
include("check.php");
if (isset($_POST["submit"])) {
  for ($i = 0; $i < count($_FILES["image"]["name"]); $i++) {
    $image = $_FILES["image"]["tmp_name"][$i];
    $imageName = $_FILES["image"]["name"][$i];
    $imageSize = $_FILES["image"]["size"][$i];
    $imageType = $_FILES["image"]["type"][$i];
    $imageTitle = $_POST["picname"];
    $imageDescription = $_POST["picdesc"];
    $imageCategory = $_POST["piccat"];
    $path = $path . $imageName;

     $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
    VALUES (?, ?, ?, ?, ?, ?, ?)");
    $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
    $query -> execute();
    $query -> close();          

 if ($imageName){
        move_uploaded_file($image, $path);
        }   
}
}
?>

Answer 2

使用此

<?php
$path = "images/projects/";
include("check.php");
if (isset($_POST["submit"])) {
     for ($i = 0; $i < count($imageName); $i++) {
        $image = $_FILES["image"]["tmp_name"][$i];
        $imageName = $_FILES["image"]["name"][$i];
        $imageSize = $_FILES["image"]["size"][$i];
        $imageType = $_FILES["image"]["type"][$i];
        $imageTitle = $_POST["picname"];
        $imageDescription = $_POST["picdesc"];
        $imageCategory = $_POST["piccat"];
        $path = $path . $imageName;

        $query = $db -> prepare("INSERT INTO images (user_id, image, description, type, title, size, category) 
        VALUES (?, ?, ?, ?, ?, ?, ?)");
        $query -> bind_param('issssis', $_SESSION['user_id'], $imageName, $imageDescription, $imageType, $imageTitle, $imageSize, $imageCategory);
        $query -> execute();
        $query -> close();          

    if ($imageName){
            move_uploaded_file($image, $path);
            }   
}
}
?>

Answer 3

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>


<script>

        //var myDropzone = new Dropzone("div#myId", { url: "/file/post" });
        Dropzone.options.myDropzone = {
            url: '#',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 5,
            maxFiles: 5,
            maxFilesize: 1,
            acceptedFiles: 'image/*',
            addRemoveLinks: true,
            init: function () {
                dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                // for Dropzone to process the queue (instead of default form behavior):
                document.getElementById("submit-all").addEventListener("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    dzClosure.processQueue();
                });              

                this.on("addedfile", function (file) {
                    alert("addedfile");

                    //file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
                });
                this.on("totaluploadprogress", function (progress) {
                    alert("totaluploadprogress");
                    //document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
                });
                this.on("sending", function (file, xhr, formData, gid) {
                    alert("sending");
                    //formData.append("gid", $('#gid').val());
                    //document.querySelector("#total-progress").style.opacity = "1";
                    //file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });
                this.on("queuecomplete", function (progress) {
                    alert("queuecomplete");
                    //document.querySelector("#total-progress").style.opacity = "0";
                });               
            }
        }


    </script>

<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

 <form action="#" class="dropzone-area" enctype="multipart/form-data" method="POST">
	<div class="dropzone" id="myDropzone"></div>
	<div class="dz-message">Drop Files Here To Upload</div>
	<button type="submit" class="btn btn-outline-primary" id="submit-all"> upload </button>
</form>

Answer 4

<div>
    <div id="dropTarget" style="width: 100%; height: 100px; border: 1px #ccc solid; padding: 10px;">Drop some files here</div>
    <output id="filesInfo"></output>

    <form enctype="multipart/form-data" method="post" action="upload.php">
        <div class="row">
            <label for="fileToUpload">Select Files to Upload</label><br />
            <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
            <output id="filesInfo"></output>
        </div>
        <div class="row">
            <input type="submit" value="Upload" />
        </div>
    </form>
</div>
<script>
    function fileSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var files = evt.dataTransfer.files;
            var div = document.createElement('div');
            var result = '';
            var file;
            for (var i = 0; file = files[i]; i++) {
                if (!file.type.match('image.*')) {
                    continue;
                }

                reader = new FileReader();
                reader.onload = (function (tFile) {
                    return function (evt) {
                        var div = document.createElement('div');
                        div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
                        document.getElementById('filesInfo').appendChild(div);
                    };
                }(file));
                reader.readAsDataURL(file);
            }
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }
    }

    function dragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy';
    }

    var dropTarget = document.getElementById('dropTarget');
    dropTarget.addEventListener('dragover', dragOver, false);
    dropTarget.addEventListener('drop', fileSelect, false);

</script>

多个图片上传

4 个答案: