图片上传完成后Javascript无法正常工作

时间:2014-09-03 18:39:51

标签: javascript php jquery ajax upload

我有一个问题是以下,我上传图片后通过ajax上传图片,我有可能为这张图片设置标题,理论上工作,问题是我只是上传图像并尝试更新标题而不刷新页面,它不执行应该只在刷新页面后才能执行的jquery,它返回正常运行,你明白了吗?

Image thumb

<div id="thumb" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                            <div class="thumbnail" data-thumb-id="25" data-thumb-categoria="galerias" data-thumb-id-galeria="8">
                                                <a href="http://quax.com.br/clientes/gasstation/uploads/imagens/800x600_8_5927030914141840.jpg" data-lightbox="galerias">
                                                    <img src="http://quax.com.br/clientes/gasstation/uploads/imagens/tb_8_5927030914141840.jpg">
                                                </a>
                                                <div class="caption">
                                                    <div class="pull-left">
                                                        <a href="editar-imagem.php?id=25&amp;idgal=8&amp;tabela=galerias_img"><span class="glyphicon glyphicon-edit"></span></a>
                                                        <a class="ativar ativo"><span class="glyphicon glyphicon-ok"></span></a>
                                                        <a class="legenda desativo" data-toggle="modal" data-target="#modal-legenda"><span class="glyphicon glyphicon-comment"></span></a>
                                                        <a class="capa ativo"><span class="glyphicon glyphicon-star"></span></a>
                                                        <a class="deletar"><span class="glyphicon glyphicon-trash"></span></a>
                                                    </div>
                                                    <div class="pull-right">
                                                        <label><input class="checkbox" type="checkbox" name="imagens[]" value="25"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

Form legenda:

<div id="modal-legenda" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Legenda</h4>
        </div>
        <div class="modal-body">
            <form id="form-legenda" method="post" action="" >
                <div class="form-group">
                    <label class="sr-only" for="legenda">Legenda</label>
                    <input class="form-control input-sm" type="text" name="legenda" id="legenda" />
                    <input type="hidden" name="id" value="<?php echo ($id?$id:false); ?>" />
                    <input type="hidden" name="id_img" value="" />
                    <input type="hidden" name="tabela_img" id="tabela_img" value="galerias_img" />
                    <input type="hidden" name="action" id="action" value="set_legenda" />

                    <div class="alert alert-warning"></div>
                    <div class="alert alert-success"></div>
                </div>
                <button type="submit" class="btn btn-primary">Salvar</button>
            </form>
        </div>
    </div>
</div>

JS

$('#upload').fileupload({
        //formData: { 'id': $('input[name=id]').val() },
        url: HTTP_GESTOR + 'ajax-fotos-upload.php',
        sequentialUploads: true,
        // Zona dropdown
        dropZone: $('#drop'),
        // Função chamada ao adicionar arquivo
        add: function (e, data) {
            var tpl = $('<li class="list-group-item working"><p></p><span class="glyphicon glyphicon-remove"></span><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div></li>');
            // Inserindo nome e tamanho do arquivo
            tpl.find('p').text(data.files[0].name).append('<i>' + formatFileSize(data.files[0].size) + '</i>');
            // FadeOut no texto e botão
            data.context = $('.center').fadeOut();
            // Inserindo itens na lista
            data.context = tpl.appendTo(ul);
            // Clique no icone
            tpl.find('span').click(function() {
                if(tpl.hasClass('working')){
                    tpl.fadeOut(function() {
                        tpl.remove();
                        $('.center').fadeIn();
                    });
                    jqXHR.abort();
                } else {
                    tpl.fadeOut(function(){
                        tpl.remove();
                        $('.center').fadeIn();
                    });
                }
            });
            // Categoria do Empreendimento e ID da galeria
            data.formData = { 'id': $('input[name=id]').val(), 'categoria': $('input[name=cat_imagens]').val(), 'tabela': $('input[name=tabela]').val() , 'tabela_img': $('input[name=tabela_img]').val() };
            // Upload
            var jqXHR = data.submit()
                .success(function (result, textStatus, jqXHR){
                    var json    = JSON.parse(result);
                    var status  = json['status'];

                    if (status == 'error') {
                        data.context.find('span').removeClass('glyphicon-ok').addClass('glyphicon-remove');
                        data.context.find('.progress-bar').addClass('progress-bar-danger');
                    }
                })
                .complete(function (result, textStatus, jqXHR){
                    var json            = JSON.parse(result);
                    var status          = json['status'];
                    var id              = json['id'];
                    var nome            = json['nome'];
                    var id_galeria      = json['id_galeria'];
                    var categoria       = json['categoria'];
                    var tabela_img      = json['tabela_img'];

                    if (status == 'success') {
                        listThumbnails(id, tabela_img, id_galeria, nome, categoria);
                    }
                });
        },
        progress: function(e, data){
            // Calculando progresso
            var progress = parseInt(data.loaded / data.total * 100, 10);
            // Barra de progresso
            data.context.find('.progress-bar').css({ width: progress + '%' }).change();
            if(progress == 100){
                data.context.find('span').removeClass('glyphicon-remove').addClass('glyphicon-ok');
                data.context.find('.progress-bar').addClass('progress-bar-success');
                data.context.removeClass('working');
            }
        },
        fail: function(e, data){
            // Erro no upload
            data.context.find('span').removeClass('glyphicon-ok').addClass('glyphicon-remove');
            data.context.find('.progress-bar').addClass('progress-bar-danger');
            data.context.addClass('error');
        },
        progressall: function(e, data){
            //alert('adsadsads');
            seta_capa();
            check_img();
            ativa_img();
            del_img();
        }
    });

// GET LEGENDA IMAGEM
    $('.caption .legenda').on('click', function(e) {
        e.preventDefault();
        var thisID = $(this).parents('.thumbnail').attr('data-thumb-id');
        var tabela = $('input[name=tabela_img]').val();

        $('#form-legenda input[name=id_img]').val(thisID);

        $.getJSON("ajax-fotos-funcoes.php", { id: thisID, action: 'get_legenda', tabela_img: tabela }, function(json) {
            $('#form-legenda input[id="legenda"]').val(json.legenda);
            $('#form-legenda input[id="id"]').val(thisID);
        });
    });

    // SET LEGENDA IMAGEM
    $('#form-legenda').submit(function(event) {
        var thisID  = $('#form-legenda input[id="id"]').val();
        var imgID   = $('#form-legenda input[id="id_img"]').val();
        var legenda = $('#form-legenda input[id="legenda"]').val();
        var tabela  = $('input[name=tabela_img]').val();

        $.ajax({
            type: "GET",
            url: HTTP_GESTOR+'ajax-fotos-funcoes.php',
            data: $(this).serialize(),
            success: function(result) {
                var json    = JSON.parse(result);
                if (json.error == 'false' && (json.legenda != null || json.legenda != '')) {
                    $('.thumbnail[data-thumb-id="'+json.id_img+'"] a.legenda').removeClass('desativo').addClass('ativo');

                }
                if (json.error == 'false' && (json.legenda == null || json.legenda == '')) {
                    $('.thumbnail[data-thumb-id="'+json.id_img+'"] a.legenda').removeClass('ativo').addClass('desativo');
                }
            }
        });

        return false;
    });

PHP

if (!empty($_GET['id']) && !empty($_GET['action']) && !empty($_GET['tabela_img']) ) {

    $tabela = strtoupper($_GET['tabela_img']);

    switch($_GET['action']) {
        case 'ativa_desativa':
            $query = $db->get_row("SELECT * FROM ".$tables[$tabela]." WHERE id='{$_GET['id']}' LIMIT 1");

            if($query->ativo == 1) {
                $db->update($tables[$tabela],array('ativo'=>'0','capa'=>'0'),array('id'=>$_GET['id']));
                $status = 'desativado';
            } else  {
                $db->update($tables[$tabela],array('ativo'=>'1'),array('id'=>$_GET['id']));
                $status = 'ativado';                
            }
            echo json_encode(array('error'=>'false','status'=>$status,'id'=>$_GET['id']));
        break;

        case 'set_capa':
            $query = $db->get_row("SELECT * FROM ".$tables[$tabela]." WHERE id='{$_GET['id']}' LIMIT 1");
            $db->update($tables[$tabela],array('capa'=>'0'),array('categoria'=>$query->categoria, 'id_galeria'=>$query->id_galeria));
            $db->update($tables[$tabela],array('capa'=>'1','ativo'=>'1'),array('id'=>$_GET['id']));
            echo json_encode(array('error'=>'false','status'=>'setada','id'=>$_GET['id']));
        break;

        case 'get_legenda':
            $query = $db->get_row("SELECT * FROM ".$tables[$tabela]." WHERE id='{$_GET['id']}' LIMIT 1");
            echo json_encode(array('error'=>'false','legenda'=>''.$query->legenda.''));
        break;

        case 'set_legenda':
            $db->update($tables[$tabela],array('legenda'=>$_GET['legenda']),array('id'=>$_GET['id_img'], 'id_galeria'=>$_GET['id']));
            if($_GET['legenda']) $status = 'setada';
            echo json_encode(array('error'=>'false','status'=>$status,'legenda'=>$_GET['legenda'],'id_img'=>$_GET['id_img'],'id'=>$_GET['id']));
        break;

        case 'deletar':
            $query = $db->get_row("SELECT * FROM ".$tables[$tabela]." WHERE id='{$_GET['id']}' LIMIT 1");

            @unlink(HTTP_UPLOADS_IMG.'real_'.$query->arquivo);
            @unlink(ROOT_UPLOADS_IMG.'real_'.$query->arquivo);

            @unlink(HTTP_UPLOADS_IMG.'800x600_'.$query->arquivo);
            @unlink(ROOT_UPLOADS_IMG.'800x600_'.$query->arquivo);

            @unlink(HTTP_UPLOADS_IMG.'tb_'.$query->arquivo);
            @unlink(ROOT_UPLOADS_IMG.'tb_'.$query->arquivo);

            $db->query("DELETE FROM ".$tables[$tabela]." WHERE id='{$_GET['id']}'");
            break;
        break;          
    }


} else echo json_encode(array('error'=>'true'));

0 个答案:

没有答案