В соответствии с сделанным комментарием используется глобальная переменная (в данном случае это экземпляр объекта FormData, а не простой массив). Обработчики событий устанавливаются для поля выбора file и для кнопки upload. Обработчик событий для поля file просто добавляет выбранные файлы к глобальному объекту FormData и обновляет html, чтобы отобразить количество выбранных файлов.
Обработчик события для кнопки upload сам вызывает очень простую функцию Ajax, которая отправляет объект FormData на сервер (в данном случае это та же страница, но может быть совершенно другим сценарием)
PHP в верхней части страницы дает быстрый пример того, как можно обработать массив $_FILES ... для завершения процесса на стороне сервера требуется гораздо больше работы - удачи!
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_FILES ) ){
ob_clean();
/*
process the uploaded files
--------------------------
In the actual LIVE version you will want to check that
each file is legitimate and of the correct type before
saving to it's final location & possibly logging the
upload in the database.
check if there were errors
check filesize
check filetype
check is_uploaded_file
check if already exists
etc etc
For demonstration of the upload process this script ONLY
echoes back the details of the files uploaded.
YOU will need to do the image processing here....
*/
/* example */
$output=array();
$files=(object)$_FILES[ 'files' ];
foreach( $files->name as $i => $void ){
$name = $files->name[$i];
$size = $files->size[$i];
$type = $files->type[$i];
$tmp = $files->tmp_name[$i];
$error= $files->error[$i];
$output[]=array('name'=>$name,'size'=>$size,'type'=>$type);
}
exit( json_encode( $output ) );
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Browse multiple locations</title>
<script>
(function(){
function ajax(url,payload,callback){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.readyState==4 && this.status==200 )callback.call( this, this.response );
};
xhr.open( 'POST', url, true );
xhr.send( payload );
}
function callback( r ){
/* typically this callback would do considerably more than this... */
console.info( r )
}
document.addEventListener('DOMContentLoaded',function(){
let fd=new FormData();
let oFile=document.querySelector('input[type="file"]');
let oBttn=document.querySelector('input[type="button"]');
oFile.addEventListener( 'change', function(e){
for( var i=0; i < this.files.length; i++ ) if( this.files[ i ].type.match( 'image/.*' ) ) fd.append( 'files[]', this.files[ i ], this.files[ i ].name );
document.getElementById('count').innerHTML=fd.getAll('files[]').length+' files in array';
},false );
oBttn.addEventListener( 'click', function(e){
if( fd.getAll('files[]').length > 0 ) ajax.call( this, location.href, fd, callback );
},false );
}, false );
})();
</script>
</head>
<body>
<form>
<div id='count'></div>
<input type='file' name='files' multiple />
<input type='button' value='Upload Files' />
</form>
</body>
</html>
Слегка отредактированная версия, прочитав ваши комментарии ... Обе версии должны работать "как есть", поэтому, если вы получаете ошибки, возможно, вы можете поделиться тем, как вы реализовали этот код
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_FILES ) ){
ob_clean();
/*
process the uploaded files
--------------------------
In the actual LIVE version you will want to check that
each file is legitimate and of the correct type before
saving to it's final location & possibly logging the
upload in the database.
check if there were errors
check filesize
check filetype
check is_uploaded_file
check if already exists
etc etc
For demonstration of the upload process this script ONLY
echoes back the details of the files uploaded.
YOU will need to do the image processing here....
*/
/* example */
$output=array();
$files=(object)$_FILES[ 'files' ];
foreach( $files->name as $i => $void ){
$name = $files->name[$i];
$size = $files->size[$i];
$type = $files->type[$i];
$tmp = $files->tmp_name[$i];
$error= $files->error[$i];
$output[]=array('name'=>$name,'size'=>$size,'type'=>$type);
}
exit( json_encode( $output ) );
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Browse multiple locations</title>
<script>
(function(){
function ajax(url,payload,callback){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.readyState==4 && this.status==200 )callback.call( this, this.response );
};
xhr.open( 'POST', url, true );
xhr.send( payload );
}
document.addEventListener('DOMContentLoaded',function(){
let fd=new FormData();
const callback=function(r){
console.info( r )
let json=JSON.parse( r );
fd=new FormData();
document.getElementById('count').innerHTML=Object.keys( json ).length + ' files uploaded';
};
let oFile=document.querySelector('input[type="file"]');
let oBttn=document.querySelector('input[type="button"]');
oFile.addEventListener( 'change', function(e){
for( var i=0; i < this.files.length; i++ ) fd.append( 'files[]', this.files[ i ], this.files[ i ].name );
document.getElementById('count').innerHTML=fd.getAll('files[]').length+' files in array';
},false );
oBttn.addEventListener( 'click', function(e){
if( fd.getAll('files[]').length > 0 ) ajax.call( this, location.href, fd, callback );
},false );
}, false );
})();
</script>
</head>
<body>
<form>
<div id='count'></div>
<input type='file' name='files' multiple />
<input type='button' value='Upload Files' />
</form>
</body>
</html>
Очень быстро ... для обработки загрузок. Измените saveir и allow_exts, как считаете нужным. У меня было бы больше проверок для различных типов файлов и т. Д., Но время для вас, чтобы подойти и взять на себя ... У меня есть больной кот, чтобы заботиться.
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_FILES ) ){
ob_clean();
$output=array();
$files=(object)$_FILES[ 'files' ];
$savedir='c:/temp/fileuploads/stack/';
$allowed_exts=array('jpg','jpeg','png');
foreach( $files->name as $i => $void ){
$name = $files->name[$i];
$size = $files->size[$i];
$type = $files->type[$i];
$tmp = $files->tmp_name[$i];
$error= $files->error[$i];
if( $error == UPLOAD_ERR_OK ){
$ext = pathinfo( $name, PATHINFO_EXTENSION );
if( is_uploaded_file( $tmp ) ){
if( in_array( $ext, $allowed_exts ) ){
$target = $savedir . '/' . $name;
$status = move_uploaded_file( $tmp, $target );
$output[]=$status===1 ? sprintf('The file %s was uploaded',$name) : sprintf('There was a problem uploading %s',$name);
} else {
$output[]='Invalid filetype';
}
} else {
$output[]='Warning: Possible file upload attack';
}
} else {
$output[]='Error ' . $error;
}
}
exit( json_encode( $output ) );
}