Upload Multiple Files From DIfferent Folders
Question
complete amateur here.
I am pretty much doing the exact process outlined here to upload multiple files with PHP and 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.
What could I implement to achieve this goal? Please let me know if there is more information I can provide.
1 answers
solution1
1 ACCPTED 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 ). Event handlers are established for the file selection field and for the upload button. 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.
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 )
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
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. 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 ) );
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.