Tengo una página HTML realmente simple con un formulario de carga de imágenes de la siguiente manera:
<form id="file_data"> <input type='file' id='image_uploaded' accept='image'/> <input type='submit' id="upload_image"/> </form>Mi JavaScript:
$(document).ready(function() { $("form[id='file_data']").submit(function() { var form_data = new FormData(this); $.ajax({ url: "upload.php", type: "POST", data: form_data, processData: false, success: function(data) { alert(data); } }); }); }); upload.php está creando un directorio para almacenar imágenes, si el directorio aún no existe. Entonces se supone que debe almacenar la imagen en el directorio:
<?php define("IMAGE_DIRECTORY", "images"); //If the directory for images does not exist, create it if(!is_dir(IMAGE_DIRECTORY)) { mkdir(IMAGE_DIRECTORY, 0777, true); } move_uploaded_file($_FILES["tmp_name"], IMAGE_DIRECTORY . "\\" .basename($_FILES["file"]["name"])); ?>Si bien el script PHP creará el directorio, si aún no existe, no guardará ninguna imagen en el directorio. Supongo que no estoy accediendo a la imagen correctamente desde PHP, pero los tutoriales que he visto no explican demasiado los detalles de lo que realmente sucede cuando se envía una imagen en una llamada Ajax a PHP.
Problema que falta en el código:
Html : enctype="multipart/form-data" en el form para cargar el archivo, también <input type="file" falta el name="file"
Php : move_uploaded_file no es correcto, falta ['file'] para tmp_name $_FILES['file']["tmp_name"]
Ajax : falta dataType:"html" para que su ajax obtenga una respuesta como cadena del servidor
Actualice su código Html , Php y Ajax de esta manera:
Código HTML:
<form id="file_data" enctype="multipart/form-data" method="post"> <input type='file' name='file' id='image_uploaded' accept='image'/> <input type='submit' id="upload_image"/> </form>Código PHP:
<?php define("IMAGE_DIRECTORY", "images"); //If the directory for images does not exist, create it if(!is_dir(IMAGE_DIRECTORY)) { mkdir(IMAGE_DIRECTORY, 0777, true); } move_uploaded_file($_FILES['file']["tmp_name"], IMAGE_DIRECTORY . "\\" .basename($_FILES["file"]["name"])); ?>Código Ajax:
$.ajax({ url: "upload.php", data : form_data, type : "POST", async: false, cache: false, contentType: false, processData: false, dateType : "html", success: function(data) { alert(data); } });