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(); 它不起作用

我还想向 delete.php?image=+data['result']+ 发送 GET 请求以从文件中删除图像。

有人有解决办法吗？

Answer 1

因为您的代码只是删除按钮 hide.first 找到父级 div 并且在这个父级 div 隐藏之后这是正常工作的。 替换这个

$(this).hide();

到

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

Answer 2

这里正在 fiddle 隐藏/删除：https://jsfiddle.net/usmanmunir/wj2rLhus/5/

$('body').on('click', '#delete', function() {
   $(this).parent().remove();
});

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

在delele.php

$FileName = $_GET['image']

使用 PHP

中的函数 implode 随心所欲地存储文件名

$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>

希望对您有所帮助。

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

Jquery hide and delete image after append and upload

javascript

jquery

get

event-delegation

jquery-events