..:: MX Studio Fóruns ::..: Upload múltiplo de arquivos com JQuery - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade




Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Upload múltiplo de arquivos com JQuery

#1 User is offline   xanburzum 

  • Group: Administrador
  • Posts: 2073
  • Joined: 04-November 08

Posted 15 October 2011 - 06:05 PM

Primeiro iremos usar o formulário para a seleção de arquivos.

formhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title> Formulário </title>
		<meta name="Generator" content="EditPlus">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">

	</head>

	<body>

		<!-- Preparações para o Uploadify -->
		<script type="text/javascript" src="uploadify/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="uploadify/swfobject.js"></script>
		<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>
		<link rel="stylesheet" href="uploadify/styles/uploadify.css" type="text/css" media="all" title="all" charset="iso-8859-1" />


		<!-- Form -->
		<form id="novoArquivo" action="envio.asp" method="post">
			<div id="fileNameList">
				<pre id="fileInfo"></pre>
				<a id="lnkExclui" href="#">Excluir</a>
			</div>
			<div id="fileUpload">
				<input id="fileInput" name="fileInputs" type="file" />
			</div>
		</form>

		<!-- A 'mágica' -->
		<script type="text/javascript">

			//--------------------------------------------------------------------------------------------
			var respData; //Variável que armazena os dados de retorno de cada upload

			//As variáveis a seguir são alimentadas na função onComplete
			//e utilizadas na função onAllComplete
			var numArquivos = 0;			//Indica quantos arquivos foram enviados
			var nomeOriginal = new Array();	//Array com o NOME ORIGINAL de cada arquivo enviado
			var nomeArquivo = new Array();	//Array com o NOME ALTERADO de cada arquivo enviado
			var tamArquivo = new Array();	//Array com o TAMANHO de cada arquivo enviado
			var statusArquivo = new Array();//Array com o STATUS DE ENVIO de cada arquivo



			//--------------------------------------------------------------------------------------------
			//Esta função será chamada no final de todo o envio
			var onAllComplete = function(event, data) {

				//Limpa o local para apresentar os dados
				$('#fileInfo').html('');

				
				//Apresenta as informações de cada arquivo
				for (var nf = 1; nf <= numArquivos; nf++) {
					$('#fileInfo').html(
						$('#fileInfo').html() + 
						'<h2>Arquivo ' + nf + '</h2>' + 
						'Status de envio: <b>' + statusArquivo[nf] + '</b><br />' +
						'Nome original do arquivo: <b>' + nomeOriginal[nf] + '</b><br />' +
						'Nome do arquivo gravado: <b>' + nomeArquivo[nf] + '</b><br />' +
						'Tamano do arquivo: <b>' + tamArquivo[nf] + '</b><br />' +
						'<a href="uploads/' + nomeArquivo[nf] + '">Link para o arquivo</a><br /><br />'
					);
				}

				//Esconde o botão e apresenta os dados do arquivo
				$('#fileNameList').show();
				$('#fileUpload').hide();
			}


			//--------------------------------------------------------------------------------------------
			//Esta função será chamada no final de CADA envio
			var onComplete = function(event, queueID, fileObj, response, data) {

				respData = $.parseJSON(response)

				//Incrementa o número de arquivos
				numArquivos++;

				//Armazena o status de envio (certamente 'OK')
				statusArquivo[numArquivos] = respData.result;

				//Se não houve erro no evio, armazena os dados do arquivo nos arrays
				if (respData.result != 'ERRO') {

					nomeOriginal[numArquivos] =		respData.nomeOriginal;
					nomeArquivo[numArquivos] =		respData.nomeArquivo;
					tamArquivo[numArquivos] =		respData.tamArquivo;

				}
			}


			//--------------------------------------------------------------------------------------------
			//O link Excluir mostra novamente o botão de upload
			$('#lnkExclui').click(function(e) {
				$('#fileNameList').hide();
				$('#fileUpload').show();
				e.preventDefault;
				return false;
			});


			//--------------------------------------------------------------------------------------------
			//Preparação inicial
			$(document).ready(function() {
				//Configuração do uploadify
				$('#fileInput').uploadify({
					'uploader'		: 'uploadify/uploadify.swf',		//Handler Flash para o upload
					'script'		: 'envio.asp',						//Página a ser chamada para tratar o upload
					'cancelImg'		: 'uploadify/cancelUpload.png',		//Imagem do botão de cancelar (X)
					'auto'			: true,								//Envio se inicia ao selecionar o arquivo
					'folder'		: '',								//Pasta para envio (quem vai tratar isso é o ASP)
					'buttonText'	: 'Procurar',						//Texto do botão
					'multi'			: true,								//Permite o envio de vários arquivos
					'onComplete'	: onComplete,						//A função a ser chamada A CADA arquivo enviado (definida acima)
					'onAllComplete'	: onAllComplete,					//A função a ser chamada no fim de TODO o envio (definida acima)
					'onSelectOnce'	: function(event,data) {			//Esta função serve apenas para zerar o número de arquivos enviados
										numArquivos = 0;				// no início do envio
								  	}
				});

				//Preparação para a primeira tela
				$('#fileNameList').hide();
				$('#fileUpload').show();
			});
		</script>



	</body>
</html>


Abaixo a página de envio do upload, onde iremos a classe de Upload e a classe JSON.

envio.asp

<!--#include file="classUpload/clsUpload.asp"-->
<!--#include file="classJson/JSON_2.0.4.asp"-->

<%

	'------------------------------------------------------------------------
	'Gera uma string aleatória com 'n' dígitos
	'Usado para criar um nome aleatório para o arquivo
	function fnGeraChave(n)
		dim s

		randomize
		s = ""
		while len(s) < n
			s = chr (int((57 - 48 + 1) * Rnd + 48)) + s
		wend
		fnGeraChave = s
	end function
	'------------------------------------------------------------------------

	Response.Charset="ISO-8859-1"

	dim objUp			'Instância da classe upload (definida no arquivo clsUpload.asp)
	dim objJson			'Instância da classe JSON (definida no arquivo JSON_2.0.4.asp)
	dim diretorio		'Diretório destino
	dim nomeOriginal	'Nome original do arquivo
	dim nomeArquivo		'Nome temporário do arquivo 
						'(Alterado para evitar que arquivos com mesmo nome se sobrescrevam)

	'Instancia a classe clsUpload
	set objUp = New clsUpload

	'Instancia a classe JSON (para enviar a resposta)
	Set objJson = jsObject()

	'Campos passados pelo Uploadify:
	'	- Filename	Nome original do arquivo enviado
	'	- folder	Este campo é definido pelo parâmetro 'folder' do uploadify - não estamos usando
	'	- Filedata	Os bytes (stream) que compõem o arquivo
	'	- Upload	Só achei o valor 'Submit Query' neste campo

	if objUp.fields("Filedata").length <> 0 and objUp.fields("Filedata").length & "" <> "" then

		nomeOriginal = objUp.fields("Filename").value
		nomeArquivo = fnGeraChave(20) & "_" & nomeOriginal

		'O diretório destino é definido aqui, como pasta filha 'uploads' da pasta atual
		diretorio = request.serverVariables("PATH_TRANSLATED")
		diretorio = left (diretorio,instrRev(diretorio,"\")) & "uploads\"

		'Salva o arquivo (Lembre-se de dar direito de escrita para o usuário IUSR!)
		objUp.fields("Filedata").saveAs(diretorio & nomeArquivo)


		'Envia os dados do arquivo via JSON (pode ser que você precise deles no outro lado)
		objJson("result") = "OK"
		objJson("nomeArquivo") = nomeArquivo
		objJson("tamArquivo") = objUp.fields("Filedata").length 
		objJson("nomeOriginal") = nomeOriginal

	else
		'Ocorreu um erro no envio
		objJson("result") = "ERRO"
	end if

	'Envia o JSON para o cliente
	objJson.flush

	'Destroi as instâncias
	Set objUp = Nothing
	Set objJson = Nothing

%>


A classe JSON_2.0.4 e a classe de Upload podem ser baixadas aqui, lembrando que será preciso criar uma pasta chamada classjson e uma pasta chamada classupload, após você terá que criar uma pasta chamada uploads , é nesta pasta, onde ficarão os arquivos que forem enviados para o servidor. Lembre-se de que o usuário IUSR precisa de direito de escrita nele.

JSON_2.0.4.asp
<%
'
'	VBS JSON 2.0.3
'	Copyright (c) 2009 Tuðrul Topuz
'	Under the MIT (MIT-LICENSE.txt) license.
'

Const JSON_OBJECT	= 0
Const JSON_ARRAY	= 1

Class jsCore
	Public Collection
	Public Count
	Public QuotedVars
	Public Kind ' 0 = object, 1 = array

	Private Sub Class_Initialize
		Set Collection = CreateObject("Scripting.Dictionary")
		QuotedVars = True
		Count = 0
	End Sub

	Private Sub Class_Terminate
		Set Collection = Nothing
	End Sub

	' counter
	Private Property Get Counter 
		Counter = Count
		Count = Count + 1
	End Property

	' - data maluplation
	' -- pair
	Public Property Let Pair(p, v)
		If IsNull(p) Then p = Counter
		Collection(p) = v
	End Property

	Public Property Set Pair(p, v)
		If IsNull(p) Then p = Counter
		If TypeName(v) <> "jsCore" Then
			Err.Raise &hD, "class: class", "Incompatible types: '" & TypeName(v) & "'"
		End If
		Set Collection(p) = v
	End Property

	Public Default Property Get Pair(p)
		If IsNull(p) Then p = Count - 1
		If IsObject(Collection(p)) Then
			Set Pair = Collection(p)
		Else
			Pair = Collection(p)
		End If
	End Property
	' -- pair
	Public Sub Clean
		Collection.RemoveAll
	End Sub

	Public Sub Remove(vProp)
		Collection.Remove vProp
	End Sub
	' data maluplation

	' encoding
	Function jsEncode(str)
		Dim charmap(127), haystack()
		charmap(8)  = "\b"
		charmap(9)  = "\t"
		charmap(10) = "\n"
		charmap(12) = "\f"
		charmap(13) = "\r"
		charmap(34) = "\"""
		charmap(47) = "\/"
		charmap(92) = "\\"

		Dim strlen : strlen = Len(str) - 1
		ReDim haystack(strlen)

		Dim i, charcode
		For i = 0 To strlen
			haystack(i) = Mid(str, i + 1, 1)

			charcode = AscW(haystack(i)) And 65535
			If charcode < 127 Then
				If Not IsEmpty(charmap(charcode)) Then
					haystack(i) = charmap(charcode)
				ElseIf charcode < 32 Then
					haystack(i) = "\u" & Right("000" & Hex(charcode), 4)
				End If
			Else
				haystack(i) = "\u" & Right("000" & Hex(charcode), 4)
			End If
		Next

		jsEncode = Join(haystack, "")
	End Function

	' converting
	Public Function toJSON(vPair)
		Select Case VarType(vPair)
			Case 0	' Empty
				toJSON = "null"
			Case 1	' Null
				toJSON = "null"
			Case 7	' Date
				' toJSON = "new Date(" & (vPair - CDate(25569)) * 86400000 & ")"	' let in only utc time
				toJSON = """" & CStr(vPair) & """"
			Case 8	' String
				toJSON = """" & jsEncode(vPair) & """"
			Case 9	' Object
				Dim bFI,i 
				bFI = True
				If vPair.Kind Then toJSON = toJSON & "[" Else toJSON = toJSON & "{"
				For Each i In vPair.Collection
					If bFI Then bFI = False Else toJSON = toJSON & ","

					If vPair.Kind Then 
						toJSON = toJSON & toJSON(vPair(i))
					Else
						If QuotedVars Then
							toJSON = toJSON & """" & i & """:" & toJSON(vPair(i))
						Else
							toJSON = toJSON & i & ":" & toJSON(vPair(i))
						End If
					End If
				Next
				If vPair.Kind Then toJSON = toJSON & "]" Else toJSON = toJSON & "}"
			Case 11
				If vPair Then toJSON = "true" Else toJSON = "false"
			Case 12, 8192, 8204
				toJSON = RenderArray(vPair, 1, "")
			Case Else
				toJSON = Replace(vPair, ",", ".")
		End select
	End Function

	Function RenderArray(arr, depth, parent)
		Dim first : first = LBound(arr, depth)
		Dim last : last = UBound(arr, depth)

		Dim index, rendered
		Dim limiter : limiter = ","

		RenderArray = "["
		For index = first To last
			If index = last Then
				limiter = ""
			End If 

			On Error Resume Next
			rendered = RenderArray(arr, depth + 1, parent & index & "," )

			If Err = 9 Then
				On Error GoTo 0
				RenderArray = RenderArray & toJSON(Eval("arr(" & parent & index & ")")) & limiter
			Else
				RenderArray = RenderArray & rendered & "" & limiter
			End If
		Next
		RenderArray = RenderArray & "]"
	End Function

	Public Property Get jsString
		jsString = toJSON(Me)
	End Property

	Sub Flush
		If TypeName(Response) <> "Empty" Then 
			Response.Write(jsString)
		ElseIf WScript <> Empty Then 
			WScript.Echo(jsString)
		End If
	End Sub

	Public Function Clone
		Set Clone = ColClone(Me)
	End Function

	Private Function ColClone(core)
		Dim jsc, i
		Set jsc = new jsCore
		jsc.Kind = core.Kind
		For Each i In core.Collection
			If IsObject(core(i)) Then
				Set jsc(i) = ColClone(core(i))
			Else
				jsc(i) = core(i)
			End If
		Next
		Set ColClone = jsc
	End Function

End Class

Function jsObject
	Set jsObject = new jsCore
	jsObject.Kind = JSON_OBJECT
End Function

Function jsArray
	Set jsArray = new jsCore
	jsArray.Kind = JSON_ARRAY
End Function

Function toJSON(val)
	toJSON = (new jsCore).toJSON(val)
End Function
%>

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic



Publicidade




1 User(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)