Загрузка файлов фактически возможна в эти дни с помощью AJAX.Да, AJAX, а не какие-то дрянные подражатели AJAX, такие как swf или java.
Этот пример может вам помочь: https://webblocks.nl/tests/ajax/file-drag-drop.html
(Он также включает интерфейс перетаскивания, но его легко игнорировать.)
В основном это сводится к следующему:
<input id="files" type="file" />
<script>
document.getElementById('files').addEventListener('change', function(e) {
var file = this.files[0];
var xhr = new XMLHttpRequest();
(xhr.upload || xhr).addEventListener('progress', function(e) {
var done = e.position || e.loaded
var total = e.totalSize || e.total;
console.log('xhr progress: ' + Math.round(done/total*100) + '%');
});
xhr.addEventListener('load', function(e) {
console.log('xhr upload complete', e, this.responseText);
});
xhr.open('post', '/URL-HERE', true);
xhr.send(file);
});
</script>
(демо: http://jsfiddle.net/rudiedirkx/jzxmro8r/)
Итак, в основном это сводится к следующему =)
xhr.send(file);
Где file - это typeof Blob: http://www.w3.org/TR/FileAPI/
Другой (лучший IMO) способ - использовать FormData.Это позволяет вам: 1) назвать файл, как в форме, и 2) отправить другие вещи (файлы тоже), например, в форме.
var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);
FormData делает серверный код чище и более отсталымсовместимый (поскольку запрос теперь имеет тот же формат, что и обычные формы).
Все это не экспериментально, но очень современно.Chrome 8+ и Firefox 4+ знают, что делать, но я не знаю ни о каких других.
Вот как я обработал запрос (1 изображение на запрос) в PHP:
if ( isset($_FILES['file']) ) {
$filename = basename($_FILES['file']['name']);
$error = true;
// Only upload if on my home win dev machine
if ( isset($_SERVER['WINDIR']) ) {
$path = 'uploads/'.$filename;
$error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
}
$rsp = array(
'error' => $error, // Used in JS
'filename' => $filename,
'filepath' => '/tests/uploads/' . $filename, // Web accessible
);
echo json_encode($rsp);
exit;
}