Upload de img com ajax e jquery no java

1 resposta
javaweb
A

Fala devs… estou algum tempo tentando resolver este problema, estou enviando um base64 por ajax, porem ao chegar na servlet o valor esta NULL.

<body>
<form enctype="application/x-www-form-urlencoded" method="post">
<input type="file" id="file" name="file" onchange="uploadFile();" />
<img alt="Imagem" id="target" width="200" height="200">
</form>
 </body>
 <script type="text/javascript">
function uploadFile() {

	var target = document.querySelector('img');
	var file = document.querySelector('input[type=file]').files[0];

	var reader = new FileReader();

	reader.onloadend = function() {
		target.src = reader.result;
		var s = reader.result;
		
		/////-----Upload ajax------

		$.post("fileUpload", {fileUpload : s}, function(data, status){
			alert("Data: " + data + "\nStatus: " + status)
		})
		/* outra maneira testada porem sem exito
		$.ajax({
			method : "POST",
			url : "fileUpload",
			data : { fileUpload : reader.result }
		}).done(function(response) {
			alert("Sucesso: " + response);
			
		}).fail(function(xhr, status, errorThrown) {
			alert("Error: ");
		});
		*/

		/////-----------
	};

	if (file) {
		reader.readAsDataURL(file); 
	} else {
		target.src = "";
	}

}
</script>

servlet no servidor:

@WebServlet("/pages/fileUpload")
public class FileUpload extends HttpServlet {
private static final long serialVersionUID = 1L;

public FileUpload() {
	super();
}

protected void doGet(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {
}

protected void doPost(HttpServletRequest request,
		HttpServletResponse response) throws ServletException, IOException {
	try {
		// usar variavel fileUpload pra salvar no banco de dados
		String fileUpload = request.getParameter("fileUpload");
		
		System.out.println("Valor recuperado: " + fileUpload);
		
		
	
		response.getWriter().write("Upload realizado com sucesso");
		
	} catch (Exception e) {
		response.getWriter().write("Erro fatal ao realizar upload");
	}

}

}

1 Resposta

L

https://mkyong.com/jquery/jquery-ajax-submit-a-multipart-form/

Criado 3 de maio de 2020
Ultima resposta 4 de mai. de 2020
Respostas 1
Participantes 2