new

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Álbum de Fotos 2 - multiUpload</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="js/multiUpload.js"></script>
<script type="text/javascript">
        var uploader = "";

        $(function() {
            $("#album").submit(function() {
                // Não continue caso já exista uma instância do multiUploader
                if (typeof uploader == "object")
                    return false;

                var data = $(this).serialize(); // Dados do formulário

                $(":text,textarea").attr("disabled", "disabled"); // Desabilitar os textos

                // Envia o formulário via Ajax
                $.ajax({
                    type: "POST",
                    url: "savealbum.php",
                    data: data,
                    cache: false,
                    dataType: "json",
                    success: function(json)
                    {
                        if (json.id > 0) // Se recebemos um id então o álbum foi salvo com sucesso
                        {
                            // Cria uma instância do multiUpload
                            uploader = new multiUpload('uploader', 'uploader_files', {
                                swf:             'swf/multiUpload.swf',
                                script:          'upload.php',
                                expressInstall:  'swf/expressInstall.swf',
                                multi:           true,
                                maxsize:        1500000, // Allow a maximum of 200 KB per file
                                onError:        function(e) {
                                    var div = document.getElementById("progress_"+e.id);
                                    div.innerHTML = e.info;
                                    div.style.backgroundColor = "#770000";
                                    div.style.width = "100%";
                                },
                                data:            json, // Envia a variável json para o script de upload (com o id do álbum)
                                fileDescription: 'JPEG Images|JPEG, GIF and PNG Images',
                                fileExtensions:  '*.jpg;*.jpeg|*.jpg;*.jpeg;*.gif;*.png',
                                onComplete:      function(e)
                                {
                                    var id = e.data; // O id retornado
                                    var file = $("#file_"+e.id+" div:first").text(); // Nome do arquivo
                                    var ext = file.split('.').pop(); // Extensão do arquivo
                                    var thumb = file.replace('.'+ext, '_thumb.'+ext); // Miniatura
                                    var $caption = $('<div class="caption" rel="'+id+'"><input type="text" name="Caption" value="'+ document.title +'" /></div>');
                                    var $button = $('<input type="button" value="Salvar" class="save" />').click(function() {
                                        $.post("savecaption.php", { id: $(this).parent().attr("rel"), caption: $(this).prev().val() }, function(data){
                                            $caption.html('<strong>'+data+'</strong>');
                                        });
                                    });
                                    $("#file_"+e.id+" div:first").prepend('<img src="uploads/'+thumb+'" width="64" height="48" />')
                                        .append($caption.append($button));
                                }
                            });

                            // Cria o html base para listagem dos arquivos selecionados e barra de progresso
                            uploader.createBaseHtml();

                            // Mostra as ações (Iniciar Upload, limpar fila)
                            $(".upload_actions").show();
                        }
                        else // Caso o álbum não seja salvo
                        {
                            $(":text,textarea").removeAttr("disabled"); // Habilita os textos novamente
                            alert(json.msg); // Mostra a mensagem de erro retornada
                        }
                    }
                });

                return false; // Previne o form de ser enviado pela forma normal
            });

            $(":text,textarea").removeAttr("disabled");
        });
    </script>
<style type="text/css">
@import "css/multiUpload.css";
 @import 'css/style.css';
</style>
</head>

<body>
<table align="center" width="600px"><tr><td>
<h1>&Aacute;lbum de Fotos 2 - multiUpload</h1>
<h4>Novo &Aacute;lbum</h4>
<br />
<form method="post" action="savealbum.php" id="album">
  <label>T&iacute;tulo:</label>
  <input type="text" name="title" size="25" maxlength="50" />
  <label>Descri&ccedil;&atilde;o:</label>
  <textarea name="description" rows="5" cols="25"></textarea>
  <br />
  <br />
  <input type="submit" value="SALVAR" />
</form>
<div id="uploader"></div>
<div id="uploader_files"></div>
<br style="clear:both" />
<div class="upload_actions"><a href="javascript:uploader.startUpload();">Iniciar Upload</a> | <a href="javascript:uploader.clearUploadQueue();">Limpar fila de Upload</a> | <a href="./">Novo &Aacute;lbum</a></div>
</td></tr></table>
</body>
</html>