Question

我的网页上有一个上传按钮。每当我上传图像时，它都会显示已上传图像的预览。如果上传了多个图像，则第一个图像的预览将显示在第一个图像旁边，依此类推。

我需要能够使用PHP将所有显示的图像上传到我的上传文件夹中。我怎么能这样做？

这是我的HTML代码，它将逐个上传图片并显示预览：

<html>
    <head>
        <meta charset=utf-8 />
        <title>Image preview</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            var blank = "http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
        </script>
        <style>
            img {
                height:200px ! important;
                width:200px ! important;
            }
        </style>
        <script type="text/javascript">
            //<![CDATA[ 
            $(window).load(function() {
                $('input[type="file"]').change(function() {
                    if ($(this).val() !== "") {
                        var file = $('#file_select')[0].files[0];
                        console.log(file.size);
                        //console.log(file.width);
                        var reader = new FileReader();
                        var img = new Image();
                        var _URL = window.URL || window.webkitURL;
                        reader.readAsDataURL(file);
                        reader.onload = function(_file) {
                            // Create a container for image and span X
                            $imageItem = $('<div style="    float: left;  border:5px solid gray; ">').addClass('imageItem');
                            $(img).appendTo($imageItem);
                            $('<span>').html('<a href="#" style="    z-index: 1;    margin-left: -32px;"><img src="trash.png" title="remove" style="    width: 32px ! important;height: 32px ! important;">        
    </a>').addClass('remover').appendTo($imageItem);
                            img.src = _file.target.result;
                            // Append the container to panel
                            $('#previewPane').append($imageItem);
                            //console.log(img.src);
                            console.log(img.width);
                        }
                    }

                    // Deletegate for dynamically created span, so we don't have to register a
                    // new event listener each time a new imageContainer is created.
                    $('#previewPane').on('click', '.remover', function() {
                        $this = $(this);
                        $this.parent('.imageItem').remove();
                    });
                });
            }); //]]>
        </script>
    </head>
    <body>
        <section>
            <form action="upload.php" method="post" enctype="multipart/form-data">
                <input type='file' name="file[]" id="file_select" multiple="multiple" />
                <br/> <span id="previewPane"></span>
                <input type="submit" value="OK">
            </form>
        </section>
    </body>
</html>

这是我的PHP代码，但目前只上传了一张图片。

<?php
for($i=0; $i<count($_FILES['file']['name']); $i++) {
  $tmpFilePath = $_FILES['file']['tmp_name'][$i];
  if ($tmpFilePath != ""){
    $newFilePath = "uploads/" . $_FILES['file']['name'][$i];
    if(move_uploaded_file($tmpFilePath, $newFilePath)) {
    }
  }
}
?>

上传所有图片

0 个答案: