如何使用jquery将删除图像/图标附加到div内的图像

我正在尝试上传一些图像，并将它们显示在一个空DIV中。上传后，如果我将鼠标悬停在一个图像上，我会得到一个删除图标，这样用户就可以通过动画将其删除，并将下一个图像移动到删除图像的位置

我如何做到这一点

这是我上传和附加到div容器的方式：

<script type="text/javascript">
 $(function () {
     document.getElementById('Nextbutton').style.visibility = "hidden"; // show 
     $("#uploader").plupload({
         // General settings
         runtimes: 'gears,flash,silverlight,browserplus,html5',
         url: 'Test.aspx',
         max_file_size: '10mb',
         max_file_count: 20,
         chunk_size: '1mb',
         unique_names: true,

         filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],


         flash_swf_url: 'js/plupload.flash.swf',


         silverlight_xap_url: 'js/plupload.silverlight.xap'
     });



     $('form').submit(function (e) {
         var uploader = $('#uploader').plupload('getUploader');

         if (uploader.files.length > 0) {

             uploader.bind('StateChanged', function () {
                 if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                     $('form')[0].submit();
                 }
             });

             uploader.start();

         }
         else
         //alert('You must at least upload one file.');

             return false;
     });
     var uploader = $('#uploader').plupload('getUploader');

     uploader.bind('FilesAdded', function (up, files) {
         //              jQuery('#container a').html('');
         $('#container > *').remove();
         var i = 0;
         while (i++ < up.files.length) {
             var ii = i;
             while (ii < up.files.length) {
                 if (up.files[i - 1].name == up.files[ii].name) {
                     $.msgBox({
                         title: "Ooops",
                         content: "There is already an image with the same filename and cannot be added.",
                         type: "error",
                         showButtons: true,
                         opacity: 0.9,
                         autoClose: false
                     });
                     uploader.removeFile(up.files[ii]);
                 } else {
                     ii++;
                 }
             }
         }
         if (i > 20) {
             $.msgBox({
                 title: "Info",
                 content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>Rest of the Images will be removed.",
                 type: "info",
                 showButtons: true,
                 opacity: 0.9,
                 autoClose: false
             });
             $('#uploader_browse').hide();
         }
     });
     uploader.bind('FilesRemoved', function (up, files) {
         if (up.files.length < 20) {
             $('#uploader_browse').fadeIn("slow");
         }
     });


     uploader.bind('FileUploaded', function (up, file, res) {
         $('#container').append("<div class='container a'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "'  rel='prettyPhoto' target='blank'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/></a></div>");



         var $imageContainers = $('#container a');

         $imageContainers.each(function (index) {
             $(this).delay(index * 50).fadeTo(400, 0.5);
         });

         $imageContainers.mouseover(function () {
             $(this).css('opacity', 1);
             $(this).find('span.del').show();
         });
         $imageContainers.mouseout(function () {
             $(this).css('opacity', 0.5);
             $(this).find('span.del').hide();
         });



         if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
             document.getElementById('Nextbutton').style.visibility = "visible"; // show 
             showStickySuccessToast();
         }
         uploader.removeFile(file);
     });

 });


     function randomString(length) {
         var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

         if (!length) {
             length = Math.floor(Math.random() * chars.length);
         }

         var str = '';
         for (var i = 0; i < length; i++) {
             str += chars[Math.floor(Math.random() * chars.length)];
         }
         return str;
     }

    </script>

$（函数（）{
document.getElementById（'Nextbutton'）.style.visibility=“hidden”//show
$（“#上传器”）.plupload({
//一般设置
运行时：“gears、flash、silverlight、browserplus、html5”，
url:'Test.aspx'，
最大文件大小：“10mb”，
最大文件数：20，
块大小：“1mb”，
唯一的名称：true，
过滤器：[
{标题：“图像文件”，扩展名：“jpg，gif，png”}，
{标题：“Zip文件”，扩展名：“Zip”}
],
flash_swf_url:'js/plupload.flash.swf'，
silverlight_xap_url:'js/plupload.silverlight.xap'
});
$（'form'）。提交（函数（e）{
var uploader=$（'#uploader'）.plupload（'getUploader'）；
如果（uploader.files.length>0）{
uploader.bind（'StateChanged'，函数（）{
if（uploader.files.length==（uploader.total.upload+uploader.total.failed））{
$（'form'）[0]。提交（）；
}
});
uploader.start（）；
}
其他的
//警报（'您必须至少上载一个文件'）；
返回false；
});
var uploader=$（'#uploader'）.plupload（'getUploader'）；
uploader.bind（'FilesAdded'，函数（up，files）{
//jQuery（'#容器a'）.html（''）；
$（“#容器>*”）.remove（）；
var i=0；
而（i++20）{
$.msgBox({
标题：“信息”，
内容：“Uuh！请不要再给我放任何文件。
最大上载限制仅为20张图像。
其余图像将被删除。”，
输入：“信息”，
显示按钮：正确，
不透明度：0.9，
自动关闭：错误
});
$（'#uploader_browse'）.hide（）；
}
});
uploader.bind（'fileremoved'，函数（up，files）{
如果（up.files.length<20）{
$（'uploader'u browse'）.fadeIn（“慢”）；
}
});
uploader.bind（'fileupload'，函数（up、file、res）{
$（“#容器”）。追加（“”）；
var$imageContainers=$（“#容器a”）；
$imageContainers.each（函数（索引）{
延迟（指数*50）.fadeTo（400,0.5）；
});
$imageContainers.mouseover（函数（）{
$（this.css（'opacity'，1）；
$（this.find（'span.del'）.show（）；
});
$imageContainers.mouseout（函数（）{
$（this.css（'opacity'，0.5）；
$（this.find（'span.del'）.hide（）；
});
if（uploader.files.length==（uploader.total.upload+uploader.total.failed））{
document.getElementById（'Nextbutton'）.style.visibility=“可见”//show
showStickySuccessToast（）；
}
uploader.removeFile（文件）；
});
});
函数随机字符串（长度）{
var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'。拆分（“”）；
如果（！长度）{
长度=Math.floor（Math.random（）*chars.length）；
}
var-str=''；
对于（变量i=0；i

这是我展示图片的部门：

<div id="container">
</div>   

演示可从以下网址获得：

HTML

<div id="container">
  <div class="image" id="image1" style="background-image:url(http://lorempixel.com/100/100/abstract);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image2" style="background-image:url(http://lorempixel.com/100/100/food);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image3" style="background-image:url(http://lorempixel.com/100/100/people);">
    <a href="#" class="delete">Delete</a>
  </div>
  <div class="image" id="image4" style="background-image:url(http://lorempixel.com/100/100/technics);">
    <a href="#" class="delete">Delete</a>
  </div>
</div>

jQuery/Javascript

$(document).ready(function(){

  $('a.delete').on('click',function(e){
    e.preventDefault();
    imageID = $(this).closest('.image')[0].id;
    alert('Now deleting "'+imageID+'"');
    $(this).closest('.image')
      .fadeTo(300,0,function(){
        $(this)
          .animate({width:0},200,function(){
            $(this)
              .remove();
          });
      });
  });

});

---

在这种情况下，您可以在标记img中设置标识符，如id、class或name，或者在要绑定事件鼠标的位置设置标记。 这是您要执行的脚本：

uploader.bind('FileUploaded', function (up, file, res)
         {
         $('#container').append("<div class='container a'>
         <a href='uploads/" + document.getElementById("currentDirectory").value 
         + "/" + file.name + "'  rel='prettyPhoto' target='blank'>
         <img class="img-upload" src='uploads/" + document.getElementById("currentDirectory").value + "/" 
         + file.name + "' width='64' height='64'/>
         </a>
         </div>"
}
);

或者如果这不起作用，你可以试试这个

$(".img-upload").live("mouseover", function(){ alert("get mouse over event"); }); 

如果您想使用timeout来搜索元素live或not，您可以尝试以下方法 您必须像这样在代码中添加id

uploader.bind('FileUploaded', function (up, file, res)
             {
             $('#container').append("<div class='container a'>
             <a href='uploads/" + document.getElementById("currentDirectory").value 
             + "/" + file.name + "'  rel='prettyPhoto' target='blank'>
             <img id="img-upload" src='uploads/" + document.getElementById("currentDirectory").value + "/" 
             + file.name + "' width='64' height='64'/>
             </a>
             </div>"
    }
    );


function waitForImg(){
var ele = document.getElementById(idImg);
 if(!ele){
  window.setTimeout(waitForImg, 100);
 }
 else{
  //you can show delete in here 
  $('#img-upload').mouseover(function() {
    //show image delete 
    alert('show your icon delete');
 });
 }
}
waitForImg();

uploader.bind（'fileupload'，函数（up，file，res）
{
$（'#容器'）。追加（“
"
}
);
函数waitForImg（）{
var ele=document.getElementById（idImg）；
如果（！ele）{
设置超时（waitForImg，100）；
}
否则{
//你可以在这里显示删除
$（'#img upload'）.mouseover（函数（）{
//显示图像删除
警报（“显示您的图标删除”）；
});
}
}
waitForImg（）；

我使用这段代码，效果非常好。之后，您将照片输入到表单中，您必须接收并存储它。如果您有问题，请告诉我

<div id="preview" class="thumbnail">
    <a href="#" id="file-select" class="btn btn-default">Select Photo</a>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="/>





    <input id="filename" name="filename" type="file"   />

            </div> 


    <input type="submit" value="Upload Photo" id="file-save" class="btn btn-primary"/>
    </div>

---

此代码有语法错误-您需要为调用

.append

使用一个右括号，您还应该告诉我们什么不起作用。是的，只是我没有将整个代码放在括号中，只是为了知道需要将image@maxedison一切正常，只是我需要知道如何在div conta的内部图像上添加图标与此类似但位于图像右上角的iner。@a'r我已更新了我的全部代码。Th

uploader.bind('FileUploaded', function (up, file, res)
             {
             $('#container').append("<div class='container a'>
             <a href='uploads/" + document.getElementById("currentDirectory").value 
             + "/" + file.name + "'  rel='prettyPhoto' target='blank'>
             <img id="img-upload" src='uploads/" + document.getElementById("currentDirectory").value + "/" 
             + file.name + "' width='64' height='64'/>
             </a>
             </div>"
    }
    );


function waitForImg(){
var ele = document.getElementById(idImg);
 if(!ele){
  window.setTimeout(waitForImg, 100);
 }
 else{
  //you can show delete in here 
  $('#img-upload').mouseover(function() {
    //show image delete 
    alert('show your icon delete');
 });
 }
}
waitForImg();

<div id="preview" class="thumbnail">
    <a href="#" id="file-select" class="btn btn-default">Select Photo</a>
    <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTgwIj48cmVjdCB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI2VlZSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijg1LjUiIHk9IjkwIiBzdHlsZT0iZmlsbDojYWFhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjEycHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+MTcxeDE4MDwvdGV4dD48L3N2Zz4="/>





    <input id="filename" name="filename" type="file"   />

            </div> 


    <input type="submit" value="Upload Photo" id="file-save" class="btn btn-primary"/>
    </div>

<script>
$('#preview').hover(
    function() {
        $(this).find('a').fadeIn();
    }, function() {
        $(this).find('a').fadeOut();
    }
)
$('#file-select').on('click', function(e) {
     e.preventDefault();

    $('#filename').click();
})

$('input[type=file]').change(function() {
    var file = (this.files[0].name).toString();
    var reader = new FileReader();

    $('#file-info').text('');
    $('#file-info').text(file);

     reader.onload = function (e) {
         $('#preview img').attr('src', e.target.result);
     }

     reader.readAsDataURL(this.files[0]);
});
    </script>

body {
    width: 300px;
    margin: 10px auto;
    text-align:center;
}
.thumbnail {
    width: 120px;
    margin: 0 auto;
    margin-bottom: 10px;
}
.thumb {
    width: 120px;
    margin: 0;
    margin-bottom: 10px;


}
#preview {
    position: relative;
}
#preview a {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    display: none;
}
#file-info {
    text-align: center;
    display: block;
}
input[type=file] {
    position: absolute;
  visibility: hidden;
  width: 0;
  z-index: -9999;
}
#file-save {
    text-align:center;
    width: 140px;
}
footer {
    margin: 10px 0;
}