Загрузить изображение после отправки сообщения через jquery

Question

Я хочу загрузить изображение по нажатию кнопки с помощью jquery.

Вот мой HTML ..

<input id="imgphno" type="text" maxlength="10" name="imgphno" /><br/><br/> 
<input id="file" type="file" name="file" /> 
<br/><br/> 
<input type="submit" name="submit" value="Send" id="sndimg"/> 

и связанный с JQuery ..

$(document).ready(function(){ 
$("#sndimg").click(function() { 
    imgphno = $("#imgphno").val(); 
    myimage = $("#file");//what should go here so that post will have image data from input=file 
    $.post("sendmsg.php", {imgphno: imgphno, imageData: myimage}, 
    function(data) { 
    alert(data); 
    }); 
} 
} 

Заранее спасибо !!

Answer 1

Можно загрузить файлы на сервер с помощью ajax, но имейте в виду, что он не поддерживается всеми браузерами (в основном IE имеет некоторые проблемы с этим). Код ниже может использоваться для отправки всей формы на сервер с помощью ajax. Это позволит загружать файлы поддерживающими браузер браузерами.

var formData = new FormData($('#ID_OF_YOUR_FORM')[0]);  
    $.ajax({ 
     url: "/urltophpscript.php", 
     type: "POST",   
     data: formData, 
     processData: false, 
     contentType: false,   
     dataType: "json", 
     success: function(data) { 
      if(data.success){ 
       // Do something 
      } 
      if(data.error){ 
       // DO something 
      } 
     }, 
     error: function() { 
      // Do something 
     } 
    }); 

Однако я бы скорее посоветовал вам пойти с решением, поддерживаемым всеми браузерами. Это делается с помощью скрывается IFRAME на странице которой форма будет размещена на:

<form action="#" method="post" enctype="multipart/form-data" id="Inet" class="form-horizontal" name="Inet" > 
<iframe src="" id="ulframe" name="ulframe" style="display:none;"></iframe> 

Выше форма и IFrame, где контент будет размещен на. Код ниже используется для передачи данных в IFRAME, а затем прочитать результат вторит из PHP сценария в формате JSON:

$('#Inet').attr('action', '/modules/module.intranett/ajax/intranett/createArticle.ajax.php'); 
$('#Inet').attr('target', 'ulframe'); 
$('#Inet').submit(); 

$('#ulframe').load(function(){ 
    var data = JSON.parse($('#ulframe').contents().text()); 
    if(data.success) { 
     // Do Something 
    } 
}); 
return false;