多个图像上传,带有预览和删除选项-php / Ajax

时间:2017-08-03 07:42:06

标签: php html css ajax

我下面的代码运行完美并上传了多张图片。

这是html和php代码:

    <?php
include_once 'includes.php';
include 'includes/getExtension.php';
$valid_formats = array("jpg", "png", "gif", 
"bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
   $group_id=$_POST['group_id'];
   if(empty($group_id))
   {
   $group_id='';
   }
   $v='';   
   $i=1;       
   foreach ($_FILES['photos']['name'] as $name => $value)
    {

    $filename = stripslashes($_FILES['photos']['name'][$name]);
    $size=filesize($_FILES['photos']['tmp_name'][$name]);
    //get the extension of the file in a lower case format
      $ext = getExtension($filename);
      $ext = strtolower($ext);

     if(in_array($ext,$valid_formats))
     {
       if($size<(1024*$uploadImageSize))
       {

       $actual_image_name = 'user'.$uid.'_'.time().$i.".".$ext;

                         if(move_uploaded_file($_FILES['photos']['tmp_name']
[$name], $upload_path.$actual_image_name))
                            {
                                $data=$Wall-
>Image_Upload($uid,$actual_image_name,$group_id);
                                 $newdata=$Wall-
>Get_Upload_Image($uid,$actual_image_name);
                                 if($newdata)
                                { 
                                    if(empty($v))
                                    $v=$newdata['id'];
                                    else
                                    $v=$v.','.$newdata['id'];

echo '<img src="'.$base_url.$upload_path.$actual_image_name.'"  
class="preview" id="'.$v.'"/>';

                                }
                            }
                            else
                         {
                            echo "Fail upload fail.";
                         }


       }
       else
       {
        echo '<span class="imgList">You have exceeded the size limit!
</span>';

       }

      }
      else
     { 
        echo '<span class="imgList">Unknown extension!</span>';

     }
       $i=$i+1;
 }

    }
?>

代码添加了多个图像并显示了图像的预览。但是现在我希望当用户点击上传的每张图片上的某个按钮(删除按钮)时,应该删除它而不是隐藏(在上传预览期间)。

对此有任何帮助将不胜感激!请注意我能够删除数据库上已经上传的图像,但在这个上面我需要能够在上传时删除。我还有以下Ajax代码:

    /* Remove Image */
$('.imageDelete').on('click',function()
{
var P=$(this);
var pid = $(this).attr("id");
var dataString = 'pid='+ pid ; 
$.ajax({
type: "POST",
url: $.base_url+"image_delete_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
jConfirm("Sure you want to delete this image? There is NO undo!", '',
function(r)
{
if(r==true)
{
P.parent().fadeOut('slow');
$('#photosContainer').masonry( 'remove', P.parent());
$('#photosContainer').masonry( 'reload' );
}
});

}
});
return false;
});

以下image_delete_ajax.php文件完美无缺:

    <?php

include_once 'includes.php';
if(isSet($_POST['pid']))
{
$pid=$_POST['pid'];
$data=$Wall->Delete_Image($uid,$pid,$upload_path);
echo $data;
}
?>

0 个答案:

没有答案