从不同的文件夹上载多个文件

时间:2018-09-07 15:02:32

标签: php html html5 file-upload webpage

这里完全是业余爱好者。

我正在执行here所述的确切过程,以使用PHP和HTML5上传多个文件。这对我来说是正确的,我可以上传多个文件。但是,这并不是我想要的。看来我的文件必须位于同一文件夹中,所以我可以执行此过程

浏览->选择文件->单击接受->上传

但是我想做的是

浏览->选择文件->单击接受->单击浏览->选择文件->单击接受->上传。

为实现该目标我可以采取什么措施?请让我知道是否可以提供更多信息。

1 个答案:

答案 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 ) );
}
相关问题