New question

Question:

Date: 18-07-2017 21:01:38 (In Spanish)

¿Cómo hacer un drag and drop para subir una imagen al servidor? [Aporte/Ayuda][Unresolved]

Hola,
Esta vez es otra de mis combinaciones raras de pregunta y aporte.

Aporte:
Estuve buscando una librería que me sirviera para hacer un drag and drop y me mostrara como quedaría la imagen en determinado lugar para que así sin tener que darle guardar y que no guste simplemente se le de deshacer. me encontré esta librería muy interesante, pero dicha librería no tenia mucha documentación que digamos.
jQuery filedrop plugin.

Seguí probando sin muchos resultados :(.
Logre algunas cosas pero las otras seguían mal, hasta que empece a buscar otras alternativas y me encontré con un tutorial que manejaba esta misma librería :).
HTML5 File Uploads with jQuery

Aunque no era lo que quería, me ayudo a guiarme.



Ahora, haciendo algunas modificaciones al articulo logre un poco lo que quería, lo que me faltaría, es la forma de poner la url final de la imagen final en un input[type=hidden] y que en el php me renombre el archivo(perdonen mi ignorancia en este caso, casi no manejo los uploads XD).

Miremos un poco del código en Jade
form(method="post" action="test.php" enctype="multipart/form-data" style="display: none")
	input(type="file" name="pic" id="pic")
	//input(type="submit" value="Upload")

div(class="progressHolder")
	div(class="progress" id="progressPortada")

div(class="profile-caption")
	img(src="https://pbs.twimg.com/profile_banners/3347253521/1440827155/1500x500" id="image-perfil-portada" alt="portada")

div#dropbox.drop-upload
	a(href="#")#upload_button
		p.message
			i.fa.fa-cloud-upload


Y un poco del JS
$(document).ready(function(){
	var dropbox = $('#dropbox'),
	message = dropbox.find('p.message');
	dropbox.filedrop({
		// The name of the $_FILES entry:
		paramname:'pic',
		fallback_id: 'upload_button',
		fallback_dropzoneClick : true,

		maxfiles: 5,
		maxfilesize: 2, // in mb
		url: 'perfil-upload.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// response is the JSON object that post_file.php returns
		},

		error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
				showMessage('Your browser does not support HTML5 file uploads!');
				break;
				case 'TooManyFiles':
				alert('Too many files! Please select 5 at most!');
				break;
				case 'FileTooLarge':
				alert(file.name+' is too large! Please upload files up to 2mb.');
				break;
				default:
				break;
			}
		},

		// Called before each upload is started
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');

				// Returning false will cause the
				// file to be rejected
				return false;
			}
		},

		uploadStarted:function(i, file, len){
			createImage(file);
		},

		progressUpdated: function(i, file, progress) {
			porcentage = ($("#progressPortada").width() / $("#profile-portada").width()) * 100;
			$.data(file).find('#progressPortada').width(porcentage);
		}

	});
	
	function createImage(file){
		var image = $('#image-perfil-portada');
		var reader = new FileReader();

		reader.onload = function(e){
			// e.target.result holds the DataURL which
			// can be used as a source of the image:
			image.attr('src',e.target.result);
		};

		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);

		dropbox.hide();
		$("#button-perfil-save span").html("GUARDAR");

		// Associating a preview container
		// with the file, using jQuery's $.data():

		$.data(file, dropbox);
	}

	function showMessage(msg){
		message.html(msg);
	}
});


El PHP en este caso no tiene ninguna modificación al del articulo comentado anteriormente, ya que en este momento este no es una prioridad que digamos, el devuelve el valor de la imagen pero no se como poner la url.

Saludos
Tags: HTML - Input - Javascript - JQuery - Opinion - PHP - Question - Suggestion - Upload Files - Web Votes: 0 - Answers: 1 - Views: 22 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com