我正在使用Uploadify jQuery插件将图片上传到我的网站。我自己用自己的队列标记自定义它。这是标记:
<form id="upload-form" action="" method="post" enctype="multipart/form-data">
<div id="file-queue">
<ul>
</ul>
</div>
<div id="upload-form-buttons">
<input type="file" name="images" id="image-upload" />
<a href="" class="primary-button">Upload</a>
</div>
</form>
还有Uploadify代码:
$('#image-upload').uploadify({
'swf': '/swf/uploadify.swf',
'uploader': 'uploadify.php',
'buttonClass': 'primary-button',
'buttonText': 'Select files',
'height': 28,
'width': 100,
'queueID': 'file-queue',
'overrideEvents': ['onSelect'],
'onSelect': function(file) {
onSelect(file);
},
'onCancel': function(file) {
onCancel(file);
}
});
当用户选择文件时,我将触发此功能以将其添加到上传队列中:
function onSelect(file) {
// Add the file to the queue
$('#file-queue ul').append('<li class="' + file.id + '">' + trimName(file.name) + '<a href="javascript:$(\'#image-upload\').uploadify(\'cancel\')"><img class="cancel" src="/img/cancel.png" /></a><span class="filesize">' + readableFileSize(file.size) + '</span></li>');
}
该文件的标记显示为:
<li class="SWFUpload_0_0">
IMG_20120610_185131.jpg
<a href="javascript:$('#image-upload').uploadify('cancel')">
<img class="cancel" src="/img/cancel.png">
</a>
<span class="filesize">606.1KB</span>
</li>
现在,当我单击“取消”按钮时,Uploadify不会触发取消事件。这是应该触发的功能:
function onCancel(file) {
// Remove file from queue
$('#file-queue ul li.' + file.id).remove();
}
但是文件永远不会从队列中删除。如果将
$('#image-upload').uploadify('cancel')
放在我的onSelect
函数中(我以此作为测试),则可以正常工作。我也尝试做类似$('img.cancel').live('click', function() { //... });
的操作,但是它也没有被解雇。同样有趣的是,如果我在页面上将
$('#image-upload').uploadify('cancel');
粘贴到Chrome javascript控制台中时,它又返回为undefined
。 最佳答案
我有同样的问题,对我来说,解决方案是将处理程序放入Uploadify回调onInit
$('#image-upload').uploadify({
...
'onInit': function () {
$('img.cancel').live('click', function() { //... });
}
});
它对我有用,但我实际上不明白,如果在Uploadify外部设置了处理程序,为什么取消不会触发
关于javascript - Uploadify取消方法未触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11367931/