Jquery在附加和上传后隐藏和删除图像

Question

我正在尝试隐藏和删除图像，这是上传后的附加代码附加代码 $('#uploaded_images').append('<div class="container uploaded_image"> <input type="text" value="'+data['result']+'" name="uploaded_image_name[]" id="uploaded_image_name" hidden> <img class="img-thumbnail" width="200" height="200" src="server/uploads/'+data['result']+'" /> <a  id="delete" href="index.php?image='+data['result']+'" class="btn btn-danger">'+data['result']+'</a> </div>');隐藏代码$('body').on('click', '#delete', function() {    // code here    $(this).hide(); });由于某种原因，它不起作用$(this).hide();我还想发送一个GET请求删除.php？图像=+数据['结果']+从文件中删除图像。有人有解决方案吗？

Answer 1

这是隐藏/删除的工作小提琴：https://jsfiddle.net/usmanmunir/wj2rLhus/5/

$('body').on('click', '#delete', function() {

   $(this).parent().remove();

});

要从服务器上载目录中删除文件，您可以发送delete.php?image=fileName

在德勒.php

$FileName = $_GET['image']

通过在 PHP 中使用函数内爆来存储所需的文件名

$FileName = array('image1', 'image2', 'image3');

$Dash_Added = implode("-", $array);

echo $Dash_Added;

unlink（） 将允许您从上传目录中删除文件，如果这是您想要的。

unlink('server/uploads'.$FileName)

上传文件并将其存储到阵列

<input type="file" onchange="SelectFiles(this)" multiple/>

<input type="submit" onclick="UploadFiles(this)" value="Upload"/>

<script>

var allFileName = []

function SelectFiles(_this) {

  for (var i = 0; i < _this.files.length; i++) {

   allFileName.push(_this.files[i]);

  }

}

function UploadFiles() {

$.ajax({                 

  url:'haha.php',                 

  dataType:'json',                 

  type:'POST',                 

  cache:true,                 

  data: {                   

    file_names: allFileName                 

  },

  success: function(response) {

    }

  })

}

</script>

希望这有帮助。

Answer 2

因为你的代码只是删除按钮是隐藏的.首先找到父div，在此父div隐藏之后，这是正常工作的。替换此

$(this).hide();

自

 $(this).parent('.uploaded_image').hide();