Fatal编程技术网

Javascript 上传所有图片

javascript php jquery html

Javascript 上传所有图片,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我的网页上有一个上传按钮。每当我上传图像时，它都会显示已上传图像的预览。如果上载了多个图像，则第二个图像的预览将显示在第一个图像的旁边，依此类推 我需要能够上传到我的上传文件夹使用PHP显示的所有图像。我该怎么做 这是我的HTML代码，将逐个上载图像并显示预览： <html> <head> <meta charset=utf-8 /> <title>Image preview</title>

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

我需要能够上传到我的上传文件夹使用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>


图像预览
var blank=”http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
img{
高度：200px！重要；
宽度：200px！重要；
}

//我已经格式化了您的代码并删除了不必要的换行符。格式良好的代码更易于阅读和调试。我还修正了内容中的一些大写问题，并在不改变原意的情况下稍微改写了句子。最后，我还将PHP标记添加到了问题中，因为它似乎非常相关。请检查此项，在不使用>$（'input[type=“file”]”）的情况下进行尝试。更改（function（）…）并在此处打印var_dump的服务器端结果（$_FILES['file']['name']）

<?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)) {
    }
  }
}
?>