这里完全是业余爱好者。
我正在执行here所述的确切过程,以使用PHP和HTML5上传多个文件。这对我来说是正确的,我可以上传多个文件。但是,这并不是我想要的。看来我的文件必须位于同一文件夹中,所以我可以执行此过程
浏览->选择文件->单击接受->上传
但是我想做的是
浏览->选择文件->单击接受->单击浏览->选择文件->单击接受->上传。
为实现该目标我可以采取什么措施?请让我知道是否可以提供更多信息。
答案 0 :(得分:1)
根据注释,使用全局变量(在这种情况下,它是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>
非常快...处理上传。根据需要更改saveirir和allowed_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 ) );
}