Question

Hii Everyone，

这里我想在单个文件夹中上传最多250张图片。最初如果用户选择的照片数量为100.Below应该显示100 div图像框，如果div框5点击图片上传，上传后应该查看图片和在图像选项卡上将显示删除图标，它将从文件夹中删除图像。最初，我尝试使用下面的简单代码。

查看页面：

<?php if($filecount>0){ ?>
  <div class="photos">
    <div id="images">
        <a href=# data-lightbox="roadtrip">
        <?php 
          $filename = substr($images[0], strrpos($images[0], '/') + 1);   
echo '<a href="'.$images[0].'" target="_blank"><img src="'.$images[0].'" style="width:250px;height:250px" /></a><br/>';
?>
    <a href="#" class="del_photo" style="color:#C20B0B;font-size:20px;" onclick="theFunction('<?php echo $filename; ?>','<?php echo $gallery_type; ?>','<?php echo $folder_name; ?>');"><i class="fa fa-remove"></i></a>

    </div>
</div>


  <?php } else { ?>
 <div id="imgContainer">
  <form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
    <div id="imgArea">
          <img src=""></img>
      <div class="progressBar">
        <div class="bar"></div>
        <div class="percent">0%</div>
      </div>
      <div id="imgChange"><span>Upload Photo</span>
        <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file" onchange="upload_img();">
      </div>

    </div>
  </form>
         </div>
  </a>
    <?php } ?>



function upload_img()
{
         var gallery_type = '<?php echo $gallery_type; ?>';
         var folder_name = '<?php echo $folder_name; ?>';
         $.ajax({
      url: "upload_image_admin.php?folder_name=" +folder_name+ "&id="+gallery_type,
      type: "POST",
      data: new FormData($('#image_upload_form')[0]),
      contentType: false,
      cache: false,
      processData:false,
      success: function(data){
       location.reload();
        },
        error: function(){}           
     }); 
         }

JQUERY文件

$(document).on('change', '#image_upload_file', function () {
var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percent = $('.progressBar .percent');

$('#image_upload_form').ajaxForm({
    beforeSend: function() {
    progressBar.fadeIn();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function(html, statusText, xhr, $form) {   
    obj = $.parseJSON(html);  
    if(obj.status){   
      var percentVal = '100%';
      bar.width(percentVal)
      percent.html(percentVal);
      $("#imgArea>img").prop('src',obj.image_medium);     
    }else{
      alert(obj.error);
    }
    },
  complete: function(xhr) {
    progressBar.fadeOut();      
  } 
}).submit();    

});

后端（保存文件夹）PHP文件

<?php
if(isset($_GET['id']))
{
    $gallery_type = $_GET['id'];
$folder_name = $_GET['folder_name'];
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = "$folder_name/$gallery_type/images/";
}
else
{
$folder_name = $_GET['folder_name'];
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = "$folder_name/images/";
}

if(isset($_FILES['image_upload_file']))
{
 $img = $_FILES['image_upload_file']['name'];
 $tmp = $_FILES['image_upload_file']['tmp_name'];

 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

 $final_image = $img;

 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 

  if(move_uploaded_file($tmp,$path)) 
  {
    echo "Image Uploaded";
  }
 } 
 else 
 {
  echo 'invalid file';
 }
}

?>

如果我喜欢这个我不能使用单个代码的所有div我应该重复相同的代码类似像250 divs我想创建相同的jquery文件250 divs 250 PHP文件是否有任何简单的方法来做单个代码上传并根据用户选择代码进行查看，以便代码可重用性能够正常工作，用户文件夹也能正常工作。减少带宽。请任何人帮我解决这个问题。下面我分享我现在尝试过的截图。

从上面的图片中你可以理解。我可以单独上传图片

选择在文件夹中上传的照片数量，并使用php

0 个答案: