Upload Múltiplo com Jquery

Upload Múltiplo com Jquery - PlUpload

- junho 11, 2014

Olá galera.

Neste post vou mostrar para vocês uma forma simples de realizar uploads múltiplos usando o jquery e o plug-in plupload.

Primeiro vamos baixar o plugin clicando aqui

Agora vamos baixar o JQuery

Eu vou realizar o exemplo no ColdFusion porque é mais prático mas a lógica é a mesma para todos.

Vamos começar então.

Crie uma pasta chamada teste na raíz do seu site
Agora crie uma pasta chamada JS e uma pasta chamada Upload
Dentro da pasta JS você vai colocar seu arquivo jquery e a pasta do PlUpload

Vamos criar dentro da pasta teste nosso arquivo index.cfm com o código abaixo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <style type="text/css">
            @import
            url(js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);
        </style>
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/plupload/plupload.full.js"></script>
        <script type="text/javascript" src="js/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
        <script type="text/javascript" src="js/plupload/i18n/pt-br.js"></script>
 </head>
 <script type="text/javascript">
  /***********************************************************************************
  * Para exemplos, documentação e detales o link é: http://www.plupload.com/examples *
  ***********************************************************************************/
  //Configurando o plupload
  $(function() {
   $("#uploader").pluploadQueue({
    runtimes : 'html5,flash,silverlight,html4',
    //Aqui faz a chamada do componente para realizar o upload
    url : 'upload.cfc?method=upload',
    //Tamanho máximo do arquivo
    max_file_size : '1024mb',
    //Quebra o arquivo em partes para realizar o upload mas rápido
    multipart: true,
    multipart_params: {
     'rdn': Math.random(),
    }, 
    //Nome do arquivo
    file_data_name: 'file',
    multiple_queues: true,
    //Filtro de extenções que você deseja permissão para upload
    filters : [
     {title : "Image files", extensions : "jpg,gif,png"},
     {title : "PDF files", extensions : "pdf"},
     {title : "ZIP files", extensions : "zip"}
    ],
    // Sort files
    sortable: true,
    
    // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
    dragdrop: true,
    
    // Views to activate
    views: {
     list: true,
     thumbs: true, // Show thumbs
     active: 'thumbs'
    },
    
    // Flash settings
    flash_swf_url : '/plupload/js/Moxie.swf',
    
    // Silverlight settings
    silverlight_xap_url : '/plupload/js/Moxie.xap'
    });
  });
 </script>
 <body>
  <div id="uploader">
   <p>
Aguarde, carregando.</p>
</div>
</body>
</html>

Agora vamos criar o componente que vai realizar a parte de upload. Vamos criar um componente dentro da pasta teste junto com o index.cfm chamado de upload.cfc e copiar o código abaixo.

<cfcomponent>
  <cffunction name="upload" access="remote" returntype="struct" returnformat="json" output="false">
    <cfscript>
      var uploadDir = expandPath('.') & '/uploads/'; // should be a temp directory that you clear periodically to flush orphaned files
      var uploadFile = uploadDir & arguments.NAME;
      var response = {'result' = arguments.NAME, 'id' = 0};
      var result = {};
      // if chunked append chunk number to filename for reassembly
      if (structKeyExists(arguments, 'CHUNKS')){
        uploadFile = uploadFile & '.' & arguments.CHUNK;
        response.id = arguments.CHUNK;
      }
    </cfscript>

<cffile action="upload" result="result" filefield="FILE" destination="#uploadFile#" nameconflict="overwrite"/>
 
    
    
    <cfscript>
      // Example: you can return uploaded file data to client
      response['size'] = result.fileSize;
      response['type'] = result.contentType;
      response['saved'] = result.fileWasSaved;

// reassemble chunked file
      if (structKeyExists(arguments, 'CHUNKS') && arguments.CHUNK + 1 == arguments.CHUNKS){
        try {
          var uploadFile = uploadDir & arguments.NAME; // file name for reassembled file - if using a temp directory then this should be the final output path/file
          if (fileExists(uploadFile)){
            fileDelete(uploadFile); // delete otherwise append will add chunks to an existing file
          }

// you could add more error handling and return info from err
          response = {'error' = {'code' = 500, 'message' = 'Internal Server Error'}, 'id' = 0};
        }
      }
      return response;
    </cfscript>
  </cffunction>
</cfcomponent>

Pronto. Agora é só testar e ser feliz. Obs.: Não se esqueça de dar permissão de 777 na pasta upload que é onde vão ficar os arquivos.

Seu diretório de teste deve ficar assim:

Pesquisar este blog

Desenvolvendo Sites

Upload Múltiplo com Jquery - PlUpload

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Criando uma Variável em ColdFusion e em ASP

Definindo Valores Padrões para Variáveis

O que é ColdFusion? Para que serve?