图片上传器和滑块
Image uploader and slider
我所有的图片都是并排上传的,而不是单独上传的。
如何解决?
我有一个 500 x 300 像素的框
ScreenShot so u can see what i mean
<?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 -->
您正在将 <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++;
}
}
我所有的图片都是并排上传的,而不是单独上传的。 如何解决?
我有一个 500 x 300 像素的框
ScreenShot so u can see what i mean
<?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 -->
您正在将 <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++;
}
}