我正在尝试上传一些图像并将它们显示在一个空的 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>
最佳答案
可在以下位置获得演示: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();
});
});
});
});
关于jquery - 如何使用 jquery 将删除图像/图标附加到 div 内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8064474/