上传图片时PHP表单处理错误答案

【问题标题】：PHP form processing ERROR in uploading image上传图片时PHP表单处理错误
【发布时间】：2014-11-22 13:16:27
【问题描述】：

我正在使用 HTML 在我的表单中上传图像并在 PHP 中处理表单我需要以下内容

用户最多只能上传 5 个文件
我需要将所有图像名称存储到 SQL 数据库中

HTML

<input type="file" id="files" name="files[]" multiple/>

脚本

<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            if (window.File && window.FileList && window.FileReader) {
                $("#files").on("change", function(e) {
                    var files = e.target.files,
                            filesLength = files.length;
                    for (var i = 0; i < filesLength; i++) {
                        var f = files[i]
                        var fileReader = new FileReader();
                        fileReader.onload = (function(e) {
                            var file = e.target;
                            $("<img></img>", {
                                class: "imageThumb",
                                src: e.target.result,
                                title: file.name
                            }).insertAfter("#files");
                        });
                        fileReader.readAsDataURL(f);
                    }
                });
            } else {
                alert("Your browser doesn't support to File API")
            }
        });
    </script>

表格处理

$file = filter_input(INPUT_POST, 'file', FILTER_SANITIZE_STRING);
$file1 = filter_input(INPUT_POST, 'file1', FILTER_SANITIZE_STRING);
$file2 = filter_input(INPUT_POST, 'file2', FILTER_SANITIZE_STRING);
$file3 = filter_input(INPUT_POST, 'file3', FILTER_SANITIZE_STRING);
$file4 = filter_input(INPUT_POST, 'file4', FILTER_SANITIZE_STRING);

使用上述代码，我需要将图像名称存储到 SQL 数据库中

【问题讨论】：

你确定你的 apache-Configuration 包含LoadModule rewrite_module modules/mod_rewrite.so （仔细检查它没有被注释掉）。另请参阅this question。
你有什么问题？
我需要将图像名称存储到 SQL，因为我只有一个输入框，我如何将所有 5 个图像名称处理到 PHP 表单处理以将图像名称存储到 sql
你遇到了什么错误？
var files = e.target.files, 行之后。因此，如果上传的文件少于 5 个，则只处理整个事情。

标签： php html forms

【解决方案1】：

我建议你看看这里：

how can I upload multiple files at a single browse using jquery or JavaScript

这里：

Count and limit the number of files uploaded (HTML file input)

【讨论】：

【解决方案2】：

您可能期望用户可以多次执行所有这些操作：

点击浏览>选择一个文件>文件显示

但多文件上传的工作方式是您在文件浏览器中选择多个文件一次（按住 CTRL）。这些是传递给 $_FILE 变量的文件。我你做了多次，只有最后一个选择的文件通过了

编辑：如果您想向用户澄清这一点，您应该删除每个文件浏览事件中的所有图像标签，以便仅显示上次选择的标签

测试以反映这一点：

<html>
    <body>
        <pre><?
        foreach ($_FILES['files']['name'] as $fileName  ) {
            echo $fileName."\n";
        }
    ?></pre>
        <form method="post" enctype="multipart/form-data">
            <input name="files[]" type="file" />
            <input name="submit" type="submit" />
        </form>
    </body>
</html>

【讨论】：

我如何将文件名作为值处理并存储在sql中

【解决方案3】：

再次编辑以反映海报对用户体验应该如何的新愿望。现在具有预览或手动选择 5 个文件的拖放功能。拖放是通过 ajax 帖子提交的，因此请注意控制台的结果。显示和流程需要简化，但显示了一个技术工作示例。相同的 PHP 代码处理这两个结果。

<html>
    <body>
        <pre><?
            print_r($_FILES); //SHOW THE ARRAY

            foreach ($_FILES as $file) {
                if (!$file['error']) {
                    //PROCESS THE FILE HERE
                    echo $file['name'];
                }
            }
        ?></pre>

        <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            var fd = new FormData(); 
            $(document).ready(function() {

                //submit dragdropped by ajax
                $("#dropsubmit").on("click", function(e) {
                     $.ajax({           
                        data: fd,
                        processData: false,
                        contentType: false,
                        type: 'POST',
                        success: function(data){
                            //FILES POSTED OK! REDIRECT
                            console.log(data);
                        }
                      });
                })

                var dropzone = $("#dropzone");
                dropzone.on('dragenter', function (e) {
                    $(this).css('background', 'lightgreen');
                });

                //dropped files, store as formdata
                dropzone.on('dragover', stopPropagate);
                dropzone.on('drop', function (e) {
                    stopPropagate(e)
                    $(this).css('background', 'white');
                     var files = e.originalEvent.dataTransfer.files;

                     for (var i = 0; i < files.length; i++)  {
                        preview(files[i])
                        fd.append('file' + (i + 1), files[i]);
                        if (i >= 5) continue
                     }

                });
                function stopPropagate(e) {
                    e.stopPropagation();
                    e.preventDefault();
                } 


                if (window.File && window.FileList && window.FileReader) {
                    $("input[type=file]").on("change", function(e) {
                        preview(e.target.files[0])
                    });
                } else {
                    alert("Your browser doesn't support to File API")
                }

                function preview(item) {
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<img></img>", {
                            class: "imageThumb",
                            src: file.result,
                            title: file.name,
                        }).appendTo("#images");
                    });
                    fileReader.readAsDataURL(item);
                }
            });
        </script>

        <div id="dropzone" style="width:100px;height:100px;border:2px dashed gray;padding:10px">Drag & Drop Files Here</div>
        <input type="button" id="dropsubmit" value="Submit dropped files" />
        <hr>
        <form method="post" enctype="multipart/form-data">
            <input id="file1" name="file1" type="file"/><br>
            <input id="file2" name="file2" type="file"/><br>
            <input id="file3" name="file3" type="file"/><br>
            <input id="file4" name="file3" type="file"/><br>
            <input id="file5" name="file3" type="file"/><br>
            <input name="submit" type="submit" value="Upload files" />
        </form><div id="images"></div>
    </body>
</html>

【讨论】：

我不能添加多个文件
可以，但不能通过多次单击“浏览”来完成。这不是控制器的设计工作方式。您单击一次浏览，然后在文件浏览器窗口中按住 CTRL 选择多个文件
我怎样才能让它多次
好吧，在这种情况下，您必须使用单独的输入元素，而不是一个带有“多个”标签的输入元素。然后 php $FILES 数组将保存文件的所有实例
...如果你投桶，我会给你一个赞成票。也许吧。

【解决方案4】：

此代码不允许您上传超过 5 个文件。在这里，诀窍是重置输入类型文件，也就是说，您只需克隆并替换以前的文件。我尝试了this.reset，但添加了多少文件的文本仍然存在。

    if (window.File && window.FileList && window.FileReader) {
        $("#files").on("change", function(e) {
            var files = e.target.files;
            var filesLength = files.length;
            var allowedCnt = 5;
            if (filesLength > allowedCnt) {
                $(this).replaceWith($(this).val('').clone(true));
                alert('Can not add more then ' + allowedCnt + ' files');
                return false;
            } else {

                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        $("<img></img>", {
                            class: "imageThumb",
                            src: e.target.result,
                            title: file.name
                        }).insertAfter("#files");
                    });
                    fileReader.readAsDataURL(f);
                }
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }

HTML

<form method="POST" action="" id="myform" enctype="multipart/form-data">
    <input type="file" id="files" name="files[]" multiple /><br />
    <input type="submit" name="submit" value="submit"  />
</form>

PHP 在这里，只需简单地连接到数据库，然后使用 foreach 循环将项目添加到您的表中即可。当然，您也可以在这里进行服务器端检查或验证！

if (isset($_POST["submit"])) {
    $link = mysqli_connect("myhost", "myuser", "mypassw", "mybd") or die("Error " . mysqli_error($link));
    foreach (array_keys($_FILES['files']['tmp_name']) as $key) {
        //Moving file where you want.
        mysqli_query($link, "INSERT INTO tblName (fieldName) VALUES ('" . mysqli_real_escape_string($_FILES["files"]['name'][$key]) . "')");
    }
}

【讨论】：

请检查上面的问题我已经添加了表单处理方法与该方法我可以做什么
添加图片时看不到图片预览
它对我有用，我看到了图像，但无论如何，我创建了一个 jsFiddle

【解决方案5】：

你必须在你的 PHP 中使用这样的代码

$conexion = mysqli_connect("Servername", "usernameDB", "PasswordDB", "nameDB");
if (isset($_FILES['files'])) {

    if (sizeof($_FILES['files']['tmp_name']) > 5) {
        exit("max 5 files allowed");
    }

    foreach ($_FILES['files']['error'] as $key => $value) {

        switch($value) {
            case (0):
                if (exif_imagetype($_FILES['files']['tmp_name'][$key])) {
                    $dome_dir = "imaged/uploaded/";
                    // do something with the file, for example move it.
                    move_uploaded_file($_FILES['files']['tmp_name'], $some_dir . $_FILES['name']);
                    $message = "is a image... Uploaded";
                    // take care, if the name are equals that something storaged, will overwrite the old file
                    $filename = mysqli_real_string_escape($conexion, $_FILES['files']['name'][$key]);
                    $store_image = $some_dir . $filename;
                    $sql = "INSERT INTO tablename(ID, IMAGE_ROUTE) VALUES(NULL, '$store_image')";
                    if(mysqli_query($conexion, $sql)){
                        echo 'Image ' . $_FILES['files']['name'][$key] . ' saved successful';
                    } else {
                        echo "An error has ocurred with the database saving the image";
                    }
                } else {
                    $message = "isn't a image";
                }
                break;
            case 1:
                $message = 'is too big';
                break;
            case 2: 
                $message = 'is too big';
                break;
            case 3:
                $message = "wasn't uploaded complete";
                break;
            case 4:
                $message = "wasn't uploaded";
                break;
            default:
                $message = "Error: file wasn't uploaded";
                break;
        }
        echo "The file name: " . $_FILES['files']['name'][$key] . ' ' . $message . '<br>';
    }
}

你的 HTML 放了这样的东西

<form id="form" method="post" enctype="multipart/form-data">
    <input type="file" name="files[]" multiple>
    <input type="submit" value="Submit">
</form>

在你的 JS 里放这样的东西

$(document).ready(function() {
    $('#form').on('submit', function(e) {
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>5){
            e.preventDefault();
            alert("You can only upload a maximum of 5 files");
        } else if (parseInt($fileUpload.get(0).files.length) == 0) {
            e.preventDefault();
            alert("Choose almost one file");
        }
    });
});

希望对你有帮助:)

【讨论】：

我正在尝试为服务器中上传的所有图像创建拇指，您能帮帮我吗？？？