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

时间：2011-11-09 11:39:15

标签： jquery html image

我正在尝试上传一些图像并将其显示在空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>

这是我展示图片的div：

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

3 个答案:

答案 0 :(得分：11)

可在以下网址获得演示：http://jsfiddle.net/CWaHL/1/

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

<强> CSS 

#container { overflow:auto; }
.image { width:100px;height:100px;float:left;position:relative; }
a.delete { display:none;position:absolute;top:0;right:0;width:30px;height:30px;text-indent:-999px;background:red; }
.image:hover a.delete { display:block; }

<强> 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();
          });
      });
  });

});

答案 1 :(得分：2)

在这种情况下，您可以在标记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标签中添加了class =“img-upload”，并将在下一步中使用。之后你必须添加监听器来搜索你的class元素。因为当浏览器在第一次执行javascript时你的元素图像没有生成。例子在document.ready中。上传图像后会生成该元素，即无法在document.ready中创建事件onmouseevent，因为dom未定义。

我的解决方案是： 1）制作活动代表或实例： 你在脚本中添加这段代码

$(".container ").delegate(".img-upload", "mouseover", function() {
  // show notification delete like icon
});

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

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

如果您想使用超时来搜索元素是否存在，您可以试试这个 你必须在这样的代码中添加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();

答案 2 :(得分：0)

我使用此代码并且工作得很好，在此之后，您在表单中输入了您的照片，并且您必须接收并存储它。如果您有任何疑问，请告诉我。

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

这是Javascript 

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

这是CSS：

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;
}
相关问题
最新问题