如何使用javascript一个一个上传文件

Question

我正在开发一个文件上传器，我希望我的用户能够同时上传多个文件，一个一个地上传多个文件。 我看到很多其他页面也有类似的问题，但没有一个能解决我的问题。

这是我的 html 上传表格：

<form id="myform" action="upload.php" method="post" enctype="multipart/form-data" >
  <h3>Upload File</h3>
  <input type="file" name="myfile[]" id="uploadFile" multiple> 
  <button type="submit" id="mySubmitButton" onclick="saveData()" name="save">UPLOAD</button>
</form>

我认为 FormData 是适合我的情况的正确方法，但我不确定。 我想制作一个文件数组并通过 PHP 文件发送它们，然后将它们发送到服务器。 我真的不想用ajax。

这是我的 Javascript 代码：

<script>

function saveData(){
  formData.getAll("myfile[]");
}

$('#uploadFile').on('change', function() {
  var formData = new FormData();
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) {
    formData.append('myfile[]', document.getElementById('uploadFile').files[i]);
  }    
});

</script>

这是行不通的。 现在我只上传最后选择的文件。 希望你能帮助我，在此先感谢！

Answer 1

尝试更改为：

$('#uploadFile').on('change', function() {
  var formData = new FormData();
  var files = $('#uploadFile').files;
  for (var i = 0; i < files.length; i++) {
    formData.append('myfile[]', files[i]);
  }    
});

Answer 2

一般的想法是创建一个全局变量（或者在匿名 function 的 scope 内）并将每个新选择的文件添加到该数组。 单击按钮时，通过发送 ajax 请求来处理此数组以上传文件。 通过使用Promises ，您可以让用户知道所有文件都已上传。

该片段在这里不起作用，因为没有 PHP 来处理请求，但完整示例可以正常工作。

 // keep track of selected files in this array let files=[]; let promises=[]; // various form elements const form=document.forms.uploader; const bttn=form.save; const input=form.querySelector('input[name="myfile[]"]'); // event handler to add selcted files to array - one or more at a time input.addEventListener('change',function(e){ for( let i=0; i < this.files.length; i++ ) files.push( this.files[i] ); }); // event handler to process button click. Ajax request sent using Fetch // result echoed to console only bttn.addEventListener('click',function(e){ e.preventDefault(); let fd=new FormData(); // create a new Promise for each file and upload. Resolve on success files.forEach( file =>{ console.info( 'Promise to upload:%s', file.name ) /* fd.set('file',file); promises.push( new Promise((resolve,reject)=>{ fetch( form.action, { method:'post', body:fd } ).then( r=>r.json() ).then( json=>resolve( json ) ).catch( err=>reject( err ) ) })) */ }) // process all files and display results /* Promise.all( promises ).then( results=>console.log(results) ).catch( err=>alert(err) ) */ });

 <.-- form action removed for testing only --> <form name='uploader' action='' method='post'><!-- upload.php --> <h3>Upload File</h3> <input type='file' name='myfile[]' multiple /> <button type='submit' name='save'>UPLOAD</button> </form>

单页中的完整示例：

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();
        
        $savepath=sprintf('%s/uploads',__DIR__);

        if( !empty( $_FILES['file'] ) ){
            $obj=(object)$_FILES['file'];
            $tmp=$obj->tmp_name;
            $name=$obj->name;
            $size=$obj->size;
            $type=$obj->type;
            $error=$obj->error;
            
            if( $error==UPLOAD_ERR_OK ){
                $targetfile=sprintf('%s/%s',$savepath,$name);
                $bytes=move_uploaded_file($tmp,$targetfile);
                
                $data=array(
                    'name'  =>  $name,
                    'size'  =>  $size,
                    'type'  =>  $type,
                    'bytes' =>  $bytes,
                    'file'  =>  $targetfile
                );
                exit( json_encode( $data ) );               
            }
            

        }
        exit();
    }
?>

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
    
        <!-- form action removed for testing only -->
        <form name='uploader' action='' method='post'><!-- upload.php -->
            <h3>Upload File</h3>
            <input type='file' name='myfile[]' multiple /> 
            <button type='submit' name='save'>UPLOAD</button>
        </form>
    
        <script>
            
            // keep track of selected files in this array
            let files=[];
            let promises=[];
            
            // various form elements
            const form=document.forms.uploader;
            const bttn=form.save;
            const input=form.querySelector('input[name="myfile[]"]');
            
            // event handler to add selcted files to array - one or more at a time
            input.addEventListener('change',function(e){
                for( let i=0; i < this.files.length; i++ ) files.push( this.files[i] );
            });
            
            
            // event handler to process button click. Ajax request sent using Fetch
            // result echoed to console only
            bttn.addEventListener('click',function(e){
              e.preventDefault();
              
              let fd=new FormData();
              
              // create a new Promise for each file and upload. Resolve on success
              files.forEach( file =>{
                  console.info( 'Promise to upload:%s', file.name )
                  fd.set('file',file);
                  
                  promises.push( new Promise((resolve,reject)=>{
                      fetch( form.action, { method:'post', body:fd } )
                        .then( r=>r.json() )
                        .then( json=>resolve( json ) )
                        .catch( err=>reject( err ) )                      
                  }))
                  
              })
              
              // process all files and display results
              Promise.all( promises )  
                .then( results=>{ console.log(results);files=[];} )
                .catch( err=>alert(err) )
            });
        </script>
    </body>
</html>

如何使用javascript一个一个上传文件

问题描述

2 个解决方案

解决方案1
1 2021-08-21 12:06:48

解决方案2
0 2021-08-21 13:04:16

如何使用javascript一个一个上传文件

问题描述

2 个解决方案

解决方案1 1 2021-08-21 12:06:48

解决方案2 0 2021-08-21 13:04:16

解决方案1
1 2021-08-21 12:06:48

解决方案2
0 2021-08-21 13:04:16