图片上传器和滑块答案

【问题标题】：Image uploader and slider图片上传器和滑块
【发布时间】：2015-06-22 21:04:16
【问题描述】：

我所有的图片都相邻上传，而不是单独的图片。如何解决？

我有一个 500 x 300 像素的盒子

<?php
    if(isset($_FILES['ImageUpload'])){
        // if the form has been submitted
        $imageName = $_FILES['ImageUpload']['name'];
        $imageTemp = $_FILES['ImageUpload']['tmp_name'];
        $imageType = $_FILES['ImageUpload']['type'];
        // filter image name
        $imageName = preg_replace("#[^a-z0-9.]#i","",$imageName);

        // error handling
        if(!$imageName){
            echo("Please select a file to upload");
        }else{
            move_uploaded_file($imageTemp, "uploads/$imageName");
        }
    }

?>

<style type="text/css">
    #slider{
        width:500px;
        height:300px;
        overflow:hidden;
        margin:30px auto;
        border:2px solid grey;
    /*  background-image:url(images/Progress.gif); */
        background-repeat:no-repeat;
        background-position:center;
    }

</style>

<script type="text/javascript" src="includes/js/jquery.js"></script>

<script type="text/javascript">
    sliderInt = 1;
    sliderNext = 2;

    $(document).ready(function() {
        $("#slider > img#1").fadeIn(300);
        startSlider();
    });

    function startSlider(){
        count = $("#slider > img").size();
        loop = setInterval(function(){

            if(sliderNext > count){
                sliderNext = 1;
                sliderInt =1;
            }

            $("#slider > img").fadeOut(300);
            $("#slider > img#" + sliderNext).fadeIn(300);

            sliderInt = sliderNext;
            sliderNext = sliderNext +1;

        }, 3000)    
    }


</script>


<form action="slider_custom.php" id="uploadsForm" method="POST" enctype="multipart/form-data">

    <input type="file" name="ImageUpload"/> Select a file to upload... <br/><br/>

    <input type="submit" value="Upload"/>

</form>


<div id="slider">


    <?php
        $imageDisplay = "";
        $images = scandir("uploads");
        $ignore = array(".","..");
        $i = '1';
        foreach($images as $file){
            if(!in_array($file, $ignore)){
                $imageDisplay .= '<img id="1" src="uploads/'.$file.'" border="0"/>';
                $i++;
            }
        }

        echo($imageDisplay);
    ?>
</div><!-- end .slider -->

【问题讨论】：

感谢您在此处严格发布 eh 进行编辑：p
所以你的滑块不起作用，或者是什么问题？
一切正常，但是当我上传我的图片时，我希望它们放在单独的文件中
可能这个不确定 count = $("#slider > img").size();

标签： php jquery html image uploader

【解决方案1】：

您将<img> 标记回显到滑块<div id="slider"> 中。它们都在该 div 内，并显示出来。

您可以添加一个样式来最初隐藏它们，然后让您的 jquery 循环一个一个地显示它们。

此外，您可能希望在每次迭代时增加 id。

类似：

$i = 1; // no need for quotes here
foreach($images as $file){
        if(!in_array($file, $ignore)){
            $imageDisplay .= '<img style="display:none" id="'.$i.'" src="uploads/'
                             .$file.'" border="0"/>';
            $i++;
        }
    }

【讨论】：

所有已修复我没有正确链接我的 jQuery 我输入错误