使用PHP脚本如何上传多个文件

Posted 2023-03-23

你百度搜一下 uploadify 这个php插件，多文件上传追问

能给说下不用插件，怎么来写个代码吗？能不能给贴一下？

追答

那就写多个file框呀～

参考技术A 把单个上传循环

如何使用 PHP、jQuery 和 AJAX 上传多个文件

【中文标题】如何使用 PHP、jQuery 和 AJAX 上传多个文件

【英文标题】：How to upload multiple files using PHP, jQuery and AJAX

【发布时间】：2013-10-18 05:05:12

【问题描述】：

我设计了一个简单的表单，允许用户将文件上传到服务器。最初，表单包含一个“浏览”按钮。如果用户想要上传多个文件，他需要点击“添加更多文件”按钮，该按钮会在表单中添加另一个“浏览”按钮。提交表单时，文件上传过程在“upload.php”文件中处理。它非常适合上传多个文件。现在我需要使用 jQuery 的 '.submit()' 提交表单并向 'upload.php' 文件发送一个 ajax ['.ajax()'] 请求来处理文件上传。

这是我的 HTML 表单：

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" id="upload" value="Upload File" />
</form>

这里是 JavaScript：

$(document).ready(function()
    $('.add_more').click(function(e)
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    );
);

这是处理文件上传的代码：

for($i=0; $i<count($_FILES['file']['name']); $i++)
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) 
    echo "The file has been uploaded successfully <br />";
 else
    echo "There was an error uploading the file, please try again! <br />";

任何关于我应该如何编写我的 '.submit()' 函数的建议都会很有帮助。

【问题讨论】：

我认为你应该使用这些过程之一，要么你可以提交，要么你可以通过 ajax 上传。你想要什么不清楚

***.com/questions/166221/… 类似问题和可能的解决方案。

无论是提交还是上传，任何事情都对我有用。但文件上传是首要任务。

【参考方案1】：

最后我通过以下代码找到了解决方案：

$('body').on('click', '#upload', function(e)
        e.preventDefault();
        var formData = new FormData($(this).parents('form')[0]);

        $.ajax(
            url: 'upload.php',
            type: 'POST',
            xhr: function() 
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            ,
            success: function (data) 
                alert("Data Uploaded: "+data);
            ,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        );
        return false;
);

【讨论】：

你为什么不接受 Kalai 的回答，因为它几乎涵盖了你需要的一切

Kalai 的回答产生了多个错误。这就是我不接受的原因。但当他试图提供帮助时，我很高兴也很感激他。

不错且简单的解决方案，尽管在您上面发布的代码中您错过了一个 ;最后..

如何在 php 中获取浏览过的文件（formData）？

@V.P 可以使用超全局变量 $_FILES 访问 PHP 中提交的文件相关数据。

【参考方案2】：

HTML

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" value="Upload File" id="upload"/>
</form>

Javascript

 $(document).ready(function()
    $('.add_more').click(function(e)
        e.preventDefault();
        $(this).before("<input name='file[]' type='file'/>");
    );
);

用于ajax上传

$('#upload').click(function() 
    var filedata = document.getElementsByName("file"),
            formdata = false;
    if (window.FormData) 
        formdata = new FormData();
    
    var i = 0, len = filedata.files.length, img, reader, file;

    for (; i < len; i++) 
        file = filedata.files[i];

        if (window.FileReader) 
            reader = new FileReader();
            reader.onloadend = function(e) 
                showUploadedItem(e.target.result, file.fileName);
            ;
            reader.readAsDataURL(file);
        
        if (formdata) 
            formdata.append("file", file);
        
    
    if (formdata) 
        $.ajax(
            url: "/path to upload/",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) 

            ,       
            error: function(res) 

                    
             );
            
        );

PHP

for($i=0; $i<count($_FILES['file']['name']); $i++)
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) 
        echo "The file has been uploaded successfully <br />";
     else
        echo "There was an error uploading the file, please try again! <br />";
    


/** 
    Edit: $target_path variable need to be reinitialized and should 
    be inside for loop to avoid appending previous file name to new one. 
*/

请使用上面的脚本进行 ajax 上传。它会工作

【讨论】：

它显示“TypeError: document.getElementByName is not a function” for var filedata = document.getElementByName("file")

仍然显示“TypeError: filedata.files is undefined” for "var i = 0, len = filedata.files.length, img, reader, file;"

@Kalai：它显示此错误“未定义 showUploadedItem”。我应该怎么做才能解决它？

它仍在重新加载我的页面

@kalai 它显示错误“filedata.files is undefined” for var "filedata = document.getElementsByName("file");"

【参考方案3】：

我的解决方案

假设表单 id = "my_form_id" 它从 HTML 中检测表单

method

和表单

action

jQuery 代码

$('#my_form_id').on('submit', function(e) 
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    var msg_error = 'An error has occured. Please try again later.';
    var msg_timeout = 'The server is not responding';
    var message = '';
    var form = $('#my_form_id');
    $.ajax(
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        url: form.attr('action'),
        type: form.attr('method'),
        error: function(xhr, status, error) 
            if (status==="timeout") 
                alert(msg_timeout);
             else 
                alert(msg_error);
            
        ,
        success: function(response) 
            alert(response);
        ,
        timeout: 7000
    );
);

【参考方案4】：

使用此源代码，您可以像 google 一样上传多个文件 一个通过ajax。还可以看到上传进度

HTML

 <input type="file" id="multiupload" name="uploadFiledd[]" multiple >
 <button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
 <div id="uploadsts"></div>

Javascript

    <script>

    function uploadajax(ttl,cl)

    var fileList = $('#multiupload').prop("files");
    $('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

    var form_data =  "";

    form_data = new FormData();
    form_data.append("upload_image", fileList[cl]);


    var request = $.ajax(
              url: "upload.php",
              cache: false,
              contentType: false,
              processData: false,
              async: true,
              data: form_data,
              type: 'POST', 
              xhr: function()   
                  var xhr = $.ajaxSettings.xhr();
                  if(xhr.upload) 
                  xhr.upload.addEventListener('progress', function(event)
                      var percent = 0;
                      if (event.lengthComputable) 
                          percent = Math.ceil(event.loaded / event.total * 100);
                      
                      $('#prog'+cl).text(percent+'%') 
                   , false);
                 
                 return xhr;
              ,
              success: function (res, status) 
                  if (status == 'success') 
                      percent = 0;
                      $('#prog' + cl).text('');
                      $('#prog' + cl).text('--Success: ');
                      if (cl < ttl) 
                          uploadajax(ttl, cl + 1);
                       else 
                          alert('Done');
                      
                  
              ,
              fail: function (res) 
                  alert('Failed');
                  
          )
    

    $('#upcvr').click(function()
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) 
            $('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
            if(i == fileList.length-1)
                uploadajax(fileList.length-1,0);
            
         
    );
    </script>

PHP

upload.php
    move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);

【讨论】：

您可以像谷歌上传一样使用jquery ajax 和php 上传图片/文件。该文件将一个接一个地上传。并非全部在一个请求中......

我试了之后什么也没做，是不是javascript有错误？