从不同文件夹上传多个文件
Upload Multiple Files From DIfferent Folders
这里完全是业余爱好者。
我几乎完全按照 here 概述的确切过程使用 PHP 和 HTML5 上传多个文件。这对我来说工作正常，我可以上传多个文件。但是，这不是我想要的。看来我的文件必须在同一个文件夹中，所以我可以执行此过程
浏览 -> select 个文件 -> 单击接受 -> 上传
但我想做的是
浏览 -> select 个文件 -> 单击接受 -> 单击浏览 -> select 个文件 -> 单击接受 -> 上传。
我可以实施什么来实现这个目标？如果我可以提供更多信息，请告诉我。
根据所做的评论，使用了一个全局变量（在本例中它是 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>
阅读了您的评论后稍作编辑的版本...两个版本都应该可以工作 "as-is" 所以如果您遇到错误，也许您可以分享您是如何实现此代码的
<?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>
很快...处理上传。根据需要更改 savedir 和 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 ) );
}
这里完全是业余爱好者。
我几乎完全按照 here 概述的确切过程使用 PHP 和 HTML5 上传多个文件。这对我来说工作正常，我可以上传多个文件。但是，这不是我想要的。看来我的文件必须在同一个文件夹中，所以我可以执行此过程
浏览 -> select 个文件 -> 单击接受 -> 上传
但我想做的是
浏览 -> select 个文件 -> 单击接受 -> 单击浏览 -> select 个文件 -> 单击接受 -> 上传。
我可以实施什么来实现这个目标？如果我可以提供更多信息，请告诉我。
根据所做的评论，使用了一个全局变量（在本例中它是 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>
阅读了您的评论后稍作编辑的版本...两个版本都应该可以工作 "as-is" 所以如果您遇到错误，也许您可以分享您是如何实现此代码的
<?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>
很快...处理上传。根据需要更改 savedir 和 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 ) );
}