3
    $('.image-remove').click(function() {

当我单击 .image-remove 时,此代码重复两次我不知道为什么!

$(function() {
var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,html4', // Runtimes in order of priority. If browser does not have HTML5, it will load flash. 
    browse_button : 'agregarArchivo', // Button to select files
    max_file_size : '300mb', 
    dragdrop: true,
    drop_element : 'agregarArchivo',
    url : 'tempupload.php', // PHP file that the images will be sent to server side 
    resize : {width : 400, quality : 60}, // File resize BEFORE it is sent to PHP url
    unique_names:true,
    flash_swf_url : 'js/plupload/plupload.flash.swf', // Required file if flash runtime is used
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"}, // Ensure that only images are loaded
    ],
});

var listaArchivos = new Array();
var cantidadArchivos = 0;
var anchoThumbnail=129; //Incluyendo margenes
var maxFiles=6;
// Initialize Plupload
uploader.init();

uploader.bind('FilesAdded', function(up, files) {

    if( (cantidadArchivos + files.length) > maxFiles)
    {
            // Removing the extra files
            while(up.files.length > maxFiles)
                {
                    if(up.files.length > maxFiles)
                    uploader.removeFile(up.files[maxFiles]);
                }
            alert('Solo puedes subir 6 fotos');
            //uploader.splice(); // reset the queue to zero
        }
    else
        {
            // Go over each file to make sure it is the correct size
            $.each(files, function(i, file) {
                if (file.size > 3*10485759) // If file size is over 30 mb
                    {
                        // Create an image shadow notifying the user of the error
                        $('#upload-dump').append('<div class="image-error"></br>Error: El archivo es demasiado grande (Max 30 MB)</br>' + file.name + '</div>');
                        alert('Error: El archivo es demasiado grande, Max 10 MB');  
                        uploader.splice(i,1);   
                    } 
                else // If the file is under 10mb
                    {
                        cantidadArchivos++;         
                        //Se reduce el tama�o de #agragarArchivo cada vez que una foto se agrega.
                        $('#agregarArchivo').css('width',( (maxFiles-cantidadArchivos) *anchoThumbnail) -4 + 'px');

                        //Si ya se han agregado 4 o m�s fotos, se achica el tama�o de letra y el tama�o de #agregarArchivo
                        if(cantidadArchivos == 4){
                                $('#agregarArchivo').css('font-size','18px');
                                $('#agregarArchivo').html('Click para agregar fotos');
                        }
                        if(cantidadArchivos == 5){
                                $('#agregarArchivo').css('font-size','16px');
                                $('#agregarArchivo').html('Agregar fotos');
                        }
                        if(cantidadArchivos == 6){
                                $('#agregarArchivo').hide();
                        }


                        // Create an image shadow set at 0 percent
                        $('#upload-dump').append('<div id="' + file.id + '" class="image-shadow">0%</div>');

                        //Rename the uploaded file!
                        var regex = /(?:\.([^.]+))?$/;
                        var ext = regex.exec(uploader.files[i].name)[1];
                        uploader.files[i].name = (ext == undefined) ? (i+1) : (i+1) + '.' + ext;


                    }
            });
            up.start();

        }
});

// Maintain progress of the image upload
uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id).html(file.percent + '%');
});

// Notify user of any errors
uploader.bind('Error', function(up, err) {
    $('#runtime').html('<div> ' + err.message + ':' + err.file.name + '</div>');                                    
}); 

// Do this when each file is uploaded.                                          
uploader.bind('FileUploaded', function(up, file, response) {
    // Change the progress to 100%
    $('#' + file.id).html('100%');
    // Replace the image shadow with the actual thumbnail image
    $('#' + file.id).replaceWith('<div id="' + file.id + '" class="image-picture"><img src="tempthumb/' + jQuery.parseJSON(response.response).result + '" /><div title="Quitar Imagen" class="image-remove"></div> </div> <input type="hidden" id="' + file.id + '" name="' + jQuery.parseJSON(response.response).result +'" value="SI"/> ');
    //Agregar un campo "input" oculto, que se usar� para pasar los nombres de las imagenes al script PHP.

// $('#' + jQuery.parseJSON(response.response).result).insertAfter(''); });

// Do this when all files are uploaded
uploader.bind('UploadComplete', function(up, files) {

    // Allow the user to remove the picture if it's incorrect
    $('.image-remove').click(function() {
        //Quito un archivo del contador.            
         cantidadArchivos--;        

        //Marco el "input" correspondiente a la foto que se elimina, con el valor NO. Este valor se usar� posteriormente en el php que procesa el envio del formulario.
        //Obtengo el id de la foto que se borrar�.
        idborrado=$(this).parent().attr('id');
        //Borro el div donde se encuentra la imagen
        $(this).parent().remove();
        //Ahora que NO hay duplicidad de ID, cambio el valor del input a "NO", que significa que NO se debe considerar esa imagen. No puede ser en otro orden.
        $('#' + idborrado).val('NO');

        //Agrando el tama�o del div #agregarArchivo, y modifico el tama�o de letra de acuerdo a las fotos agregadas.
        if(cantidadArchivos  <= 3){
                $('#agregarArchivo').css('width',( (maxFiles-cantidadArchivos) *anchoThumbnail) -4 + 'px');
                $('#agregarArchivo').css('font-size','30px');
                $('#agregarArchivo').html('Click para agregar fotos');
        }
        if(cantidadArchivos == 4){
                $('#agregarArchivo').css('width',( (maxFiles-cantidadArchivos) *anchoThumbnail) -4 + 'px');
                $('#agregarArchivo').css('font-size','18px');
                $('#agregarArchivo').html('Click para agregar fotos');
        }
        if(cantidadArchivos == 5){
                $('#agregarArchivo').show();
                $('#agregarArchivo').css('width',( (maxFiles-cantidadArchivos) *anchoThumbnail) -4 + 'px');
                $('#agregarArchivo').css('font-size','16px');
                $('#agregarArchivo').html('Agregar fotos');
        }
    });

});
});
/* El script NO borra los thumbnails que se crean, por lo que hay que borrarlos manualmente */
4

3 回答 3

6

我用以下代码解决了它:

$('.image-remove').unbind('click').click(function() {

出于某种原因,当您动态创建 div 时,我不明白 click(function() 会触发两次。

这是对问题的解释: http ://webroxtar.com/2011/10/solution-jquery-click-event-gets-called-twice-fires-twice/

于 2013-08-02T16:22:58.590 回答
1

发生这种情况是因为,当您重新加载其中包含脚本、添加点击事件的内容时,您实际上链接了两次或更多点击事件,具体取决于您加载该内容的次数。所以这就是为什么你应该使用 unbind("click") 来确保删除以前添加的活页夹。

于 2014-04-26T18:35:20.470 回答
0

它应该像

$('.image-remove').click(function() {
    var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,html4', // Runtimes in order of priority. If browser does not have HTML5, it will load flash. 
    browse_button : 'agregarArchivo', // Button to select files
    max_file_size : '300mb',

当它出现在事件下时,不要将代码放在下面。

$(function(){....})

它将在页面加载时运行脚本

于 2013-08-02T05:24:22.973 回答