Problema com plugin Jquery file upload

tigredonorte · Março 3, 2011

Não consigo submeter outro input que nao o do tipo file. Acredito que o plugin oculte em alguma parte os inputs, mas não consegui achar. Alguém que tenha o plugin pode me ajudar? segue o código:


<?php

   if (!empty($_FILES))
   {
       $file = $_FILES['imagens'];
       foreach($_FILES as $file)
       {
           print_r($file) . "<br /><br />";
           //captura o arquivo temporario
           $tempFile = $file['tmp_name'];
           $targetPath = './Files/';
           $targetFile =  str_replace('//','/',$targetPath) . $file['name'];

           if(move_uploaded_file($tempFile,$targetFile))
           {
               $resultado = "upload realizado com sucesso!";
           }
           else {
               $resultado = "Erro ao fazer upload";
           }
       }
   }
   if (!empty($_POST))
   {
       print_r($_POST);
   }

?>



<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Exemplo de upload</title>
       <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" id="theme">
       <link rel="stylesheet" href="jquery.fileupload-ui.css">

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
       <script src="jquery.fileupload.js"></script>
       <script src="jquery.fileupload-ui.js"></script>
       <script>
       /*global $ */
       $(function () {
           $('#formulario').fileUploadUI({
               dropZone: $('#upload_container'),
               uploadTable: $('#files'),
               downloadTable: $('#files'),
               buildUploadRow: function (files, index) {
                   return $(
                       '<tr>' +
                           '<td>' + files[index].name + '</td>' +
                           '<td class="file_upload_progress">\n\
                               <div></div>\n\
                           </td>' +
                           '<td class="file_upload_cancel">' +
                               '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                                   '<span class="ui-icon ui-icon-cancel">Cancel</span>' +
                               '</button>' +
                           '</td>' +
                           '<td class="file_upload_start">' +
                                '<div class="ui-state-default ui-corner-all" title="Start Upload">' +
                                   '<span class="ui-icon ui-icon-circle-arrow-n">Start Upload</span>' +
                                '</div>' +
                           '</td>' +
                       '</tr>'
                   );
               },
               buildDownloadRow: function (file) {
                   return $('<tr><td>' + file.name + '</td></tr>');
               },
               beforeSend: function (event, files, index, xhr, handler, callBack) {
                   handler.uploadRow.find('.file_upload_start button').click(callBack);
               }
           });
       });

       $('#enviar').click(function () {
               $('.file_upload_start button').click();
       });
       $('#cancel_uploads').click(function () {
               $('.file_upload_cancel').click();
       });
       </script>
   </head>
   <body>
       <form id="formulario" action="" method="post" enctype="multipart/form-data">
           <input type="text" name="nome" style="display: block"/>
           <div id="upload_container">
               <input type="file" name="file" multiple>
               <button>Upload</button>
               <div>Upload files</div>
           </div>
       </form>

       <table id="files"></table>

       <button id="enviar" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
           <span class="ui-button-icon-primary ui-icon ui-icon-circle-arrow-e"></span>
           <span class="ui-button-text">Start Uploads</span>
       </button>
       <button id="cancel_uploads" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">
           <span class="ui-button-icon-primary ui-icon ui-icon-cancel"></span>
           <span class="ui-button-text">Cancel Uploads</span>
       </button>
   </body>
</html>

tigredonorte · Março 3, 2011

Consegui resolver.... podem mover o tópico pra laboratório de scripts:

O script do file upload pode se baixado em: Link

Ele precisa do Jquery e opcionalmente pelo jqueryui para funcionar.

No site do link tem outros exemplos de implementação.

A vantagem deste plugin é que ele utiliza somente javascript, e é possível com ele usar javascript não obstrusivo, coisa que não consegui com outros plugins..

Abaixo um exemplo de código:


<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Exemplo de upload</title>
       <link rel="stylesheet" href="jquery.fileupload-ui.css">

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <script src="jquery.fileupload.js"></script>
       <script src="jquery.fileupload-ui.js"></script>
       <script>
       $(function () {
   $('#formulario').fileUploadUI({
       uploadTable: $('#files'),
       downloadTable: $('#files'),
       buildUploadRow: function (files, index) {
           return $(
           '<tr>'+
               '<td>' + files[index].name + '<\/td>' +
               '<td class="file_upload_progress">' +
                   '<div><\/div>' +
            	'<\/td>' +
               '<td class="file_upload_start">' +
                   '<button class="ui-state-default ui-corner-all" title="Start Upload">' +
                       '<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
                   '<\/button>'+
               '<\/td>' +
            	'<td class="file_upload_cancel">' +
                   '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                       '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                   '<\/button>'+
               '<\/td>' +
           '<\/tr>');
       },
       buildDownloadRow: function (file) {
           return $('<tr><td>' + file.name + '<\/td><\/tr>');
       },
       beforeSend: function (event, files, index, xhr, handler, callBack) {
           var ext = /\.(png)|(jpg)|(gif)$/i;
           var num = 4;
           var maxsize = 500000;
           // Using the filename extension for our test,
           // as legacy browsers don't report the mime type
           if (index > num) {
               handler.uploadRow.find('.file_upload_progress').html('Selecione no máximo ' + num + ' arquivos');
           }
           if (!ext.test(files[index].name)) {
               handler.uploadRow.find('.file_upload_progress').html('Caro usuário, selecione somente imagens');
               setTimeout(function () {
                   handler.removeNode(handler.uploadRow);
               }, 10000);
               return;
           }
           if (files[index].size > maxsize) {
                   handler.uploadRow.find('.file_upload_progress').html('Caro usuário o arquivo '+ files[index].name +' contém '+ files[index].size/1000 +
                       'Kb, é maior do que: ' + maxsize/1000 + ' Kb. Selecione um arquivo menor');
                   setTimeout(function () {
                       handler.removeNode(handler.uploadRow);
                   }, 10000);
                   return;
           }
           handler.uploadRow.find('.file_upload_start button').click(callBack);
       }
   });

   $('#enviar').click(function () {
       $('.file_upload_start button').click();
   });

   $('#submeter').hide();
   $('#enviar').show();
});
       </script>
   </head>
   <body>

       <form id="formulario" action="upload.php" method="post" enctype="multipart/form-data">
           <input type="text" name="example_text">
           <div class="file_upload">
               <input type="file" name="file" multiple>
               <button>Upload</button>
               <div>Selecione os arquivos</div>
           </div>
           <input type="submit" id="submeter" value="enviar"/>
       </form>
       <input type="button" id="enviar" value="Enviar"/>
       <table id="files"></table>
   </body>
</html>

No exemplo acima eu instancio um formulario que submete outros inputs e que envia multiplos arquivos.

neste trecho de código eu implemento as informacoes que serão exibidas na tela para cada arquivo selecionado:


buildUploadRow: function (files, index) {
           return $(
           '<tr>'+
               '<td>' + files[index].name + '<\/td>' +
               '<td class="file_upload_progress">' +
                   '<div><\/div>' +
            	'<\/td>' +
               '<td class="file_upload_start">' +
                   '<button class="ui-state-default ui-corner-all" title="Start Upload">' +
                       '<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
                   '<\/button>'+
               '<\/td>' +
            	'<td class="file_upload_cancel">' +
                   '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                       '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                   '<\/button>'+
               '<\/td>' +
           '<\/tr>');
       },

Neste outro trecho eu faço as devidas validacoes dos arquivos via javascript, lembrando que deve haver outra validacao no lado do servidor:

eu valido o tamanho do arquivo, o numero maximo de arquivos a serem enviados e as extensões permitidas


beforeSend: function (event, files, index, xhr, handler, callBack) {
           var ext = /\.(png)|(jpg)|(gif)$/i;
           var num = 4;
           var maxsize = 500000;
           // Using the filename extension for our test,
           // as legacy browsers don't report the mime type
           if (index > num) {
               handler.uploadRow.find('.file_upload_progress').html('Selecione no máximo ' + num + ' arquivos');
           }
           if (!ext.test(files[index].name)) {
               handler.uploadRow.find('.file_upload_progress').html('Caro usuário, selecione somente imagens');
               setTimeout(function () {
                   handler.removeNode(handler.uploadRow);
               }, 10000);
               return;
           }
           if (files[index].size > maxsize) {
                   handler.uploadRow.find('.file_upload_progress').html('Caro usuário o arquivo '+ files[index].name +' contém '+ files[index].size/1000 +
                       'Kb, é maior do que: ' + maxsize/1000 + ' Kb. Selecione um arquivo menor');
                   setTimeout(function () {
                       handler.removeNode(handler.uploadRow);
                   }, 10000);
                   return;
           }
           handler.uploadRow.find('.file_upload_start button').click(callBack);
       }
   });

Neste trecho eu permito que os arquivos sejam enviados pelo clique do botao:



   $('#enviar').click(function () {
       $('.file_upload_start button').click();
   });

Neste trecho escondo o input do tipo submit e exibo o input do tipo button, isto torna o javascript nao obstrusivo,

caso o usuario tenha o javascript desabilitado, ele ainda funcionará, sem o upload multiplo de arquivos, mas ainda sim funcionara

   $('#submeter').hide();
   $('#enviar').show();

Então é isso, espero que seja util, pois gastei um tempo tentando descobrir como fazer para que este script funcionasse.

Entrar

Arquivado

Problema com plugin Jquery file upload

Recommended Posts

tigredonorte 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

tigredonorte 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante