Buenos dias. Estoy intentando que el formulario de envío de un mensaje sea más fluido evitando la recarga de la página para el envío del mismo. Dado que el mensaje puede ser texto o imagen, necesito enviar ambos a una página PHP para cargarlos. Estoy usando este código en la página html:

 <form id="newmessage" enctype="multipart/form-data"> <textarea form="newmessage" id="messagetext" name="messagetext" ></textarea> <input type="submit" name="submit" value="send" onclick="return newMessage();"> <input type="file" accept="image/*" id="image" name="image"> </form> <script> function newMessage(){ var messagetext = document.getElementById("messagetext").value; var image = document.getElementById("image").value; $.ajax({ type:"post", url:"new_message.php", data: { "messagetext" :messagetext, "image" :image, }, cache:false, success: function(html) { document.getElementById("messagetext").value = ""; } }); return false; } </script>

Como puede ver, permito que los usuarios escriban en el área de texto o carguen un archivo. Cuando envían el formulario, se invoca el método newMessage() y envía la imagen y el texto del mensaje a new_message.php , que los procesa:

 // new_message.php $messagetext = $_POST["messagetext"]; $image = $_FILES["image"]["tmp_name"]; if((!empty($messagetext) || isset($image))) { if(!empty($messagetext)) { // create text message } else if(isset($image)) { // create image message } }

Cuando escribo un mensaje de texto funciona perfectamente, pero no envía nada si es imagen. Tal vez la variable de imagen en AJAX no esté tomando el archivo correctamente. Disculpe si esta pregunta no está clara, pero soy un principiante en StackOverlow y estoy abierto a modificaciones. Gracias por todas las respuestas.