Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jayr Alencar Jhs

Colocar Progressbar e botão cancelar em upload de images

Por , em Javascript

Recommended Posts

Jayr Alencar Jhs    2

Jayr Alencar Jhs
Postado

Galera, estou usando um script para upload de imagens e gostaria de saber como colocar uma barra de progresso e também como colocar um botão para cancelar o upload de imagens indesejadas,o script é este:

 

<script>
	
	// Stores all files to be upload (drag and drop can be done in multiple steps)
	var filesToUpload = [];

	function addDropFilesCapabilities(){
		var dropArea = document.getElementById("dropArea"); 
		
		dropArea.addEventListener("dragenter", function(event) {
		  event.preventDefault();												   
		}, true);
		
		dropArea.addEventListener("dragover", function(event) {
		  event.preventDefault();
		  dropArea.className = "dropAreaOver";
		}, true);
		
		dropArea.addEventListener("dragleave", function(event) {
		  event.preventDefault();
		  dropArea.className = "";
		}, true);
		
		dropArea.addEventListener("drop", function(event) {
			event.preventDefault();
		    dropArea.className = "";			
			var allFiles = event.dataTransfer.files;
			for (var i = 0; i<allFiles.length; i++){
				var file = allFiles[i];
				filesToUpload.push(file);
				if (file.type!="image/jpeg"){
					return;
				}
				createImageViewFromImageFile(file);						
			}
		}, true);
				
	}
	
	function createImageViewFromImageFile(file){
		var img = document.createElement("img");
		var reader = new FileReader();
		// Allow the fileReader event handler to get the right image reference.
		reader.img = img;
		reader.onloadend = function() {
			this.img.src = this.result;
		}
		reader.readAsDataURL(file);
		img.classList.add("obj");
		var content  = document.getElementById("content"); 
		content.appendChild(img);		
	}
	
	function uploadFiles(){
		if (window.FormData){
			uploadUsingFormData();
		} else {
			uploadUsingGetAsBinary();
		}
	}
	
	function uploadUsingFormData(){
		var f = new FormData();
		for (var i=0; i<filesToUpload.length; i++){
			var file = filesToUpload[i];
			f.append("images[]", file);
					
		}
		var request = new XMLHttpRequest();
		request.open("POST", "upload.php?id=<?php echo $id_noticia ?>", true);
		request.onload = uploadResultHandler;		
		request.send(f);       
	}
	
	function uploadUsingGetAsBinary(){
		var boundary = '------multipartformboundary' + (new Date).getTime();
		var dashdash = '--';
		var crlf     = '\r\n';
		
		/* Build RFC2388 string. */
		var builder = '';
	
		builder += dashdash;
		builder += boundary;
		builder += crlf;

	    /* For each dropped file. */
		for (var i=0; i<filesToUpload.length; i++){
	        var file = filesToUpload[i];
			/* Generate headers. */            
			builder += 'Content-Disposition: form-data; name="images[]"';
			if (file.fileName) {
			  builder += '; filename="' + file.fileName + '"';
			}
	        builder += crlf;
	
			builder += 'Content-Type: application/octet-stream';
			builder += crlf;
			builder += crlf; 

			/* Append binary data. */
			builder += file.getAsBinary();
			builder += crlf;

			/* Write boundary. */
			builder += dashdash;
			builder += boundary;
			builder += crlf;
		}
    
		/* Mark end of the request. */
		builder += dashdash;
		builder += boundary;
		builder += dashdash;
		builder += crlf;
		
		var request = new XMLHttpRequest();
		request.open("POST", "upload.php?id=<?php echo $id_noticia ?>", true);
		request.setRequestHeader('content-type', 'multipart/form-data; boundary='+ boundary);
		request.onload = uploadResultHandler;	
		request.sendAsBinary(builder);        
   	}
	
	function uploadResultHandler(event){
		if (event.target.readyState != 4)
		   return;
		/* If we got an error display it. */
		result = eval("(" + event.target.responseText + ")");			
		alert(result.message);
		if (result.status == 1){
			filesToUpload = [];
		}
	}
		
	window.onload=function(){
		addDropFilesCapabilities();	
	}
</script>
</head>

<body>
    <div id="dropArea">Arraste as fotos para cá!</div>
    <div id="content">

    </div>
    <div id="submitPanel">
    	
    	<button class="btn success" onClick="uploadFiles()">Enviar arquivos</button>
    </div>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito