Отправка файла с использованием Ajax

Отравить файл на сервер с использованием стандартных AJAX-приемов у Вас не получится. Однако, не стоит отчаиваться, есть очень простой и красивый выход.

Мы используем невидимый фрейм, в который отправляем результат работы скрипта. Чтобы не потерять результат работы мы его делаем видимым в момент отправки.

<form target="upload_frame" enctype="multipart/form-data"
    onsubmit="document.getElementById('upload_frame').style.display='block';">
 <input type="file" name="upload_file"><br>
 <input type="submit">
</form>
<!-- Это невидимый frame в котором и будет выполняться загрузка данных -->
<iframe id="upload_frame" name="upload_frame" width="468" height="30" style="display:none"></iframe>

Вы, возможно, спросите, а как совместить отправку данных с помощью Ajax и отправку файла. Отвечаю, очень просто, делаем две формы:

// Здесь должен быть запрос к базе и получение данных в массив $row
echo '<br>
<!--первая форма отправки данных с помощью Ajax -->
<form method="POST" action="edit.php" onsubmit=\'return SendForm("edit",this);\'>
<input type="hidden" name="id" value='.$row['id'].'>
Наименование: <input type="text" name="name" size="75" value="'.$row['name'].'" style="width:95%"><br>
Описание: <input type="text" name="description" size="75" value="'.$row['description'].'"><br>
Код производителя: <input type="text" name="kod_prodact" size="25" value="'.$row['kod_prodact'].'"><br>
Цена закупки: <input type="text" name="price0" size="10" value="'.$row['price0'].'">
<input type=\'submit\' value=\'Сохранить\'>
<span id="edit"><!--сюда выводиться ответ от Ajax запроса--></span>
</form>
<!--вторая форма загрузки изображения -->
<form enctype="multipart/form-data" method="POST" action="edit.php"
    target="upload_frame" onsubmit=\'getObj("upload_frame").style.display="block"\'>
<input type="hidden" name="id" value='.$row['id'].'>
<input name="MAX_FILE_SIZE" type="hidden" value="100000">
Изображение(<100Kb): <input type="file" name="img" size="55">
<input type="submit" value="Загрузить">
</form>
<iframe id="upload_frame" name="upload_frame" width="468" height="30" style="display:none"></iframe>';

Используемые скрипты из общей библиотеки js.js:

function ajaxLoad(obj,url,defMessage,post,callback){
  var ajaxObj;
  if (defMessage) document.getElementById(obj).innerHTML=defMessage;
  //var xml = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  if(window.XMLHttpRequest){
      ajaxObj = new XMLHttpRequest();
  } else if(window.ActiveXObject){
      ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
      return;
  }
  ajaxObj.open ((post?'POST':'GET'), url);
  if (post&&ajaxObj.setRequestHeader)
      ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8;");
  ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null));
  ajaxObj.send(post);
  return false;
  }
function updateObj(obj, data, bold, blink){
   if(bold)data=data.bold();
   if(blink)data=data.blink();
   document.getElementById(obj).innerHTML = data;
  }
function ajaxCallBack(obj, ajaxObj, callback){
return function(){
    if(ajaxObj.readyState == 4){
       if(callback) if(!callback(obj,ajaxObj))return;
       if (ajaxObj.status==200)
        updateObj(obj, ajaxObj.responseText);
       else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1);
    }
}}

function SendForm(obj,formComment){
 str=''
 for (i=0; i<formComment.length; i++) if(formComment[i].name){
     str=str+encodeURIComponent(formComment[i].name)+'=';
    if(formComment[i].tagName=='SELECT')
      str=str+encodeURIComponent(formComment[i].options[formComment[i].selectedIndex].value)+'&';
    else str=str+encodeURIComponent(formComment[i].value)+'&';
     }
 str=str.slice(0,-1);
 ajaxLoad(obj,formComment.action,'Отправка...', str)
 return false;
 }

function getObj(objID)
{
    if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
}

Этот код использован в админской части интернет магазина компьютерной техники г.Ростова-на-Дону: eaiti.ru

Пример отправки файла на сервер с указанием сколько загруженно/осталось.