Javascript PHP | HTML-调试文件上传程序_Javascript_Php_Html

Javascript PHP | HTML-调试文件上传程序

javascript php html

Javascript PHP | HTML-调试文件上传程序,javascript,php,html,Javascript,Php,Html,我有以下代码： <?php if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_FILES ) ){ ob_clean(); /* process the uploaded files -------------------------- check if there were errors check filesize ch

我有以下代码：

<?php
   if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_FILES ) ){
     ob_clean();


   /*
       process the uploaded files
       --------------------------

       check if there were errors
       check filesize
       check filetype
       check is_uploaded_file
       check if already exists
       etc
   */

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


浏览多个位置
（功能（）{
函数ajax（url、有效负载、回调）{
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）callback.call（this，this.response）；
};
xhr.open（'POST'，url，true）；
发送（有效载荷）；
}
document.addEventListener（'DOMContentLoaded'，function（）{
设fd=newformdata（）；
常量回调=函数（r）{
控制台信息（r）
让json=json.parse（r）；
fd=新FormData（）；
document.getElementById（'count'）.innerHTML=Object.keys（json）.length+'files upload'；
};
let of ile=document.querySelector（'input[type=“file”]”）；
设oBttn=document.querySelector（'input[type=“button”]”）；
oFile.addEventListener（'change'，函数（e）{
对于（var i=0；i0）ajax.call（this，location.href，fd，callback）；
}，假）；
}，假）；
})();

代码的目的应该是允许在一个网页上进行多次上载，但是可以从不同的目录进行。也就是说，上传过程将停止

浏览-->选择文件-->浏览-->选择文件-->上载

我理解PHP和HTML代码，但承认我对javascript的功能没有很好的理解。我在谷歌上搜索了很多，有了一个好主意，但并不彻底

当我使用wamp服务器测试代码时，会发生以下情况：

1）我在浏览过程中选择$n$文件，文本显示“$n$文件添加到数组”，就像查看javascript时一样

2）我再次浏览并选择$m$more files，文本将按原样显示“$n+m$files added to the array”

3）我按下upload，它会显示“$n+m$上传的文件，根据查看javascript的需要”。此时，如果您在google chrome中打开控制台，它将显示上载的文件

我的问题是，在开始时访问if语句似乎有问题。我在里面添加了

echo“hello”

作为测试，它不回显hello。我尝试

var_dump（_FILES['FILES']）

（编辑：我的意思是

var_dump（$_FILES['FILES']）

），即使在if语句之外，它也没有所有的上传（通常只是最后添加的一个或没有）。是什么阻止我处理上载的文件？上传的文件要去哪里？它们是如何出现在控制台中的

我对这里很陌生，也不熟悉编程。如果有什么我可以做，以提高我的职位质量，请让我知道

-------------编辑-----------------

当我想知道是否正在访问

if

语句时，我做了一些测试。请看这里：

只有

hello3

得到了我的回复

编辑：第一个粘贴箱中有一个输入错误。和这个一样的问题

**不写echo“hello”write console.log（“hello”）**

您是否尝试过以下方法：

var_dump($_FILES['files']);

而不是：

var_dump(_FILES['files'])

或者你可以这样处理：

if(isset($_FILES['files'])){ echo 'there is a least one file'; }

这里最可能的问题是您的

标记，您需要设置

enctype

属性才能上载文件

<form method="post" enctype="multipart/form-data">
    <div id='count'></div>
    <input type='file' name='files' multiple />
    <input type='button' value='Upload Files' />
</form>

之前：

xhr.send( payload );

花些时间来理解什么是AJAX，以及如何在PHP中使用AJAX，这将开始变得有意义。我将尝试概述您的页面上发生了什么，以及为什么您无法看到PHP的输出，但可以看到上载的最新文件

每次提交表单时，页面上的JavaScript都会发出单独的

POST

请求。

POST

请求指向与当前页面相同的URL，但它是一个完全独立的请求。有点像在同一页上打开两个窗口。因此，

$\u服务器['REQUEST\u METHOD']

将不会在您正在查看的页面上更新，并且您将永远看不到测试的输出

您应该做的是将

POST

逻辑分离到它自己的文件中，并向该文件发出AJAX请求，而不是将其全部包含在一个页面中。这将帮助您理解和维护代码。

是的，我做到了。对不起，那只是个打字错误。好地方。代码是否应该在其他情况下工作？正如我提到的，我不知道javascript和ajax的内容，而且我对网页内容有点陌生，所以我无法找出可能存在的错误。那么你想验证$\u文件是否为空？尝试从这个“文件”中删除“]”检查我在编辑中发布的粘贴栏。我实际上是在试图检索我上传的文件。当我单击upload时，它们正确地显示在控制台中，但我不知道如何使用PHP获得它们，以便在我编辑文章的页面上开始使用它们。看一看，别忘了从这个“文件”中删除“]这肯定是我修补过的东西之一，因为我在某个地方读到过，但我可能一次尝试了多个东西。让我隔离这一尝试并报告，添加第二件事实际上在控制台“提交表单”中给了我一个错误，逻辑上等同于单击“上载文件”按钮？是的。它是相同的，只是它是由AJAX请求处理的。

xhr.send( payload );