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

问题描述 投票:0回答:1

在这里完成业余。

我几乎正在按照here概述的过程用PHP和HTML5上传多个文件。这对我来说正常,我可以上传多个文件。但是,这不是我想要的。看来我的文件必须在同一个文件夹中,所以我可以做这个过程

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

但我想做的是

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

我可以实现什么来实现这一目标?如果我能提供更多信息,请告诉我。

php html html5 file-upload webpage
1个回答
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>

很快......处理上传。根据需要更改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 ) );
}
© www.soinside.com 2019 - 2024. All rights reserved.