Одним из нововведений HTML 5 стала загрузка файлов drag & drop. Большенство браузеров еще не поддерживают данное новшество (на данный момент работает в Firefox 4+, Chrome и Opera 11.10), но это скоро изменится.
В этом посте я приведу пример клиентского кода на HTML и серверного скрипта на PHP.


HTML


<html>
<head>
  <meta charset="utf-8">
    
  <title>Загрузка файлов Drag & Drop в HTML 5</title>  
    
  <script src="http
://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>    
    <div id="#dropzone">
      Для загрузки перетащите файл сюда.
    </div>

   <script language="javascript">
   function upload (event)
   {
      var data = event.dataTransfer;

      var boundary = '------multipartformboundary' + (new Date).getTime();
      var dashdash = '--';
      var crlf     = '\r\n';

      var builder = '';

      builder += dashdash;
      builder += boundary;
      builder += crlf;
    
      var xhr = new XMLHttpRequest();
    
      /* Для каждого брошенного файла */
      for (var i = 0; i < data.files.length; i++) {
          var file = data.files[i];
           
          builder += 'Content-Disposition: form-data; name="user_file[]"';
          if (file.fileName) {
            builder += '; filename="' + file.fileName + '"';
          }
          builder += crlf;

          builder += 'Content-Type: application/octet-stream';
          builder += crlf;
          builder += crlf; 

          builder += file.getAsBinary();
          builder += crlf;

          builder += dashdash;
          builder += boundary;
          builder += crlf;
    }
    
    builder += dashdash;
    builder += boundary;
    builder += dashdash;
    builder += crlf;

    xhr.open("POST", "upload.php", true);
    xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' 
        + boundary);
    xhr.sendAsBinary(builder);        
    
    xhr.onload = function(event) { 
        /* If we got an error display it. */
        if (xhr.responseText) {
            alert(xhr.responseText);
        }
        $("#dropzone").load("list.php?random=" +  (new Date).getTime());
    };
    
    /* Prevent FireFox opening the dragged file. */
    event.stopPropagation();
   }
 
   $(function()
   {
       $('#dropzone')
        .get(0)
        .addEventListener('drop', upload, false);

       upload(event);
    }
   </script>
</body>
</html>


PHP


<?php

$error_message[0] = "Неизвестная ошибка.";
$error_message[1] = "Слишком большой файл.";
$error_message[2] = "Слишком большой файл.";
$error_message[3] = "Файл был загружен только частично.";
$error_message[4] = "Выберете файл для загрузки.";

$upload_dir  = './tmp/';
$num_files = count($_FILES['user_file']['name']);

for ($i=0; $i < $num_files; $i++) {
    $upload_file = $upload_dir . basename($_FILES['user_file']['name'][$i]);

    if (!preg_match("/(gif|jpg|jpeg|png)$/",$_FILES['user_file']['name'][$i])) {
        print "Нужна была картинка...";
    } else {
        if (is_uploaded_file($_FILES['user_file']['tmp_name'][$i])) {
            if (move_uploaded_file($_FILES['user_file']['tmp_name'][$i], 
                                $upload_file)) {
                /* Успех! */
            } else {
                print $error_message[$_FILES['user_file']['error'][$i]];
            }
        } else {
            print $error_message[$_FILES['user_file']['error'][$i]];
        }    
    }
}
?>