从不同的文件夹上载多个文件
[英]Upload Multiple Files From DIfferent Folders
问题描述
complete amateur here. 
在这里完成业余。
I am pretty much doing the exact process outlined here to upload multiple files with PHP and HTML5. 我几乎做概括的确切过程在这里上传PHP和HTML5多个文件。 This is working correctly for me and I am able to upload multiple files. 这对我来说工作正常，我可以上传多个文件。 However, it is not quite what I want. 但是，这并不是我想要的。 It seem my files have to be in the same folder, so I can do this process 这似乎我的文件必须在同一文件夹，所以我可以做这个过程
browse -> select files -> click accept -> upload 浏览->选择文件->单击接受->上传
but what I would like to do is 但我想这样做是
browse -> select file(s) -> click accept -> click browse -> select a file(s) -> click accept -> upload. 浏览 - >选择文件（S） - >点击接受 - >点击浏览 - >选择一个文件（S） - >点击接受 - >上传。
What could I implement to achieve this goal? 我可以采取什么措施实现这一目标？ Please let me know if there is more information I can provide. 如果可以提供更多信息，请告诉我。
1 个解决方案
解决方案1
1 已采纳 2018-09-08 08:03:32
As per the comment made, a global variable is used ( in this instance it is an instance of a FormData object rather than a simple array ). 根据评论，将使用全局变量（在这种情况下，它是FormData对象的实例，而不是简单的数组）。 Event handlers are established for the file selection field and for the upload button. 为file选择字段和upload按钮建立了事件处理程序。 The event handler for the file field simply appends selected files to the global FormData object and updates the html to display a count of files so far selected. file字段的事件处理程序仅将所选文件追加到全局FormData对象，并更新html以显示到目前为止所选文件的数量。
The event handler for the upload button itself invokes a very basic Ajax function that sends the FormData object to the server ( in this case it is the same page but could be an entirely different script ) 对于事件处理程序upload按钮本身调用发送了一个非常基本的Ajax功能FormData对象服务器（在这种情况下，同一个页面，但可能是一个完全不同的脚本）
The PHP at the top of the page gives a quick example of how one would process the $_FILES array... there is much more work required to complete the process server side - good luck! 在页面顶部的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>
A slightly edited version having read your comments...Both versions should work "as-is" so if you are getting errors perhaps you can share how you have implemented this code 经过稍微编辑的版本已阅读您的注释...两个版本均应“按原样”运行，因此，如果您遇到错误，也许可以分享实现此代码的方式
<?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>
Very quickly... to process the uploads. 很快......来处理上传。 Change savedir and allowed_exts as you see fit. 您认为合适的更改SaveDir可以和allowed_exts。 I would have more checks in there for various filetypes etc but time for you to step up and take over... I have a sick cat to look after. 我将在其中检查各种文件类型等更多信息，但有时间让您加强并接管...我有一只病猫照顾。
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 ) );
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.