CODEWITHSUNDEEP
phpfile-uploadhtml
Prince M
Prince M

Reputation: 441

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. 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.

Upvotes: 0

Views: 2076

Answers (1)

Professor Abronsius
Professor Abronsius

Reputation: 33803

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 ) );
}

Upvotes: 1

Related Questions