个人中心
gpt4 book ai didi

php - 动态下拉文件上传的文件上传进度

转载 作者：行者123 更新时间：2023-12-02 19:05:08 24 4
gpt4 key购买 nike

我制作了一个动态下拉文件上传系统，用户可以选择工程流，然后选择学期，然后选择主题，然后将文件上传到所需的目录中。这通常工作得很好。我偶然发现了 PHPAcademy 的 Javascript/AJAX 文件上传进度教程，一切都很好，直到我陷入困境。

在不添加 javascript 文件(用于上传进度)的情况下，文件会上传到正确的目录中，在 firebug 中不会显示任何错误，并且还会在上传后提供文件的链接。

但是我添加JS文件后，上传后链接没有出现，它总是上传到根目录中，但它显示进度，并且控制台显示两个错误。

这是我的 PHP 代码:

<?php

    if(isset($_POST['upload']))   { 
      $path1=$_POST['one']."/"; 
      $path2=$_POST['two']."/"; 
      $path3=$_POST['three']."/";   
      $upload_path=$path1.$path2.$path3;
    }
    else  {
          echo "Follow the instructions before uploading a file";
    }    

    if(!empty($_FILES['file'])) {
        foreach($_FILES['file']['name'] as $key => $name) {
            if($_FILES['file']['error'][$key]==0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], $upload_path."$name")) {
                $uploaded[] = $name;
            }
        }
        if(!empty($_POST['ajax'])) {
            die(json_decode($uploaded));
        }   
    }  
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> SRMUARD - Upload </title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="upload.js"></script>        
        <script type="text/javascript">
            function val()
            {
                if(document.uploads.three.selectedIndex == 0)
                {
                    alert("Please choose all the appropriate options");
                }
            }
        </script>   
        <script>
            $(function() {
                $("#text-one").change(function() {
                $("#text-two").load("textdata/" + $(this).val() + ".txt");
                });
                $("#text-two").change(function() {
                $("#text-three").load("textdata/" + $(this).val() + ".txt");
                });
            });
        </script>
    </head>
    <body>
        <div value="<?php $upload_path ?>" id="uploadpath"></div>
        <div id="uploaded">
            <?php
                if(!empty($uploaded)) {
                    foreach($uploaded as $name) {
                        echo 'File Link: '.'<a href="' . $upload_path . $name . '" >', $name, '</a><br/>';
                    }
                }
            ?>
        </div>
        <div id="upload_progress" style="display: none"></div>
        <div>
            <form action="" method="POST" enctype="multipart/form-data" name="upload" id="upload">
                <label for="file">Choose a file: </label><br/>
                    <input type="file" name="file[]" id="file" multiple="multiple"><br/><br/>               
                    <select id="text-one" name="one">                   
                        <option selected value="base">Select Department</option>
                        <option value="CSE" name="cse">Computer Science Engineering</option>
                        <option value="ECE" name="ece">Electronics & Communication Engineering</option>
                        <option value="MECH" name="mech">Mechanical Engineering</option>                        
                    </select><br/><br/> 
                    <select id="text-two" name="two"> //Displays options dynamically using text files
                        <option>Select Semester</option>
                    </select><br/><br/>                  
                    <select id="text-three" name="three"> //Displays options dynamically using text files
                        <option>Select Subject</option>
                    </select><br/><br>  
                    <input type="submit" name="upload" id="submit" value="Upload" onClick="val()" />        
            </form>
        <div>
    </body>
</html>

这是我的 JavaScript 代码:

var handleUpload = function(event) {

    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('file');

    var data = new FormData();

    data.append('ajax', true);

    for(var i = 0; i < fileInput.files.length; ++i) {
        data.append('file[]', fileInput.files[i]);
    }

    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(event) {
        if(event.lengthComputable) {

            var percent = event.loaded / event.total;
            var progress = document.getElementById('upload_progress');

            while(progress.hasChildNodes()) {
                progress.removeChild(progress.firstChild);
            }

            progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%'));
        }
    });

    request.upload.addEventListener('load', function(event) {
        document.getElementById('upload_progress').style.display = 'none';
    });

    request.upload.addEventListener('error', function(event) {
        alert('Upload failed due to some reason!');
    });



    request.addEventListener('readystatechange', function(event) {
        if(this.readyState == 4) {
            if(this.status == 200) {

                var links = document.getElementById('uploaded');
                var uploaded = eval(this.response);
                var div, a;
                var phpval = document.getElementById('uploadpath').value;
                for(var i=0; i < uploaded.length; ++i) {
                    div = document.createElement('div');
                    a = document.createElement('a');
                    a.setAttribute('href', phpval + uploaded[i]);
                    a.appendChild(document.createTextNode(uploaded[i]));
                    div.appendChild(a);
                    links.appendChild(div);
                }

            } else {
                console.log('Server replied with HTTP status ' + this.status);
            }
        }
    });

    request.open('POST','upload.php');
    request.setRequestHeader('Cache-Control','no-cache');

    document.getElementById('upload_progress').style.display = 'block';

    request.send(data);

}

window.addEventListener('load',function(event) {
    var submit = document.getElementById('submit'); 
    submit.addEventListener('click', handleUpload);
});

控制台中显示的错误是:

TypeError: document.uploads is undefined
[Break On This Error]   

if(document.uploads.three.selectedIndex == 0)

和

SyntaxError: missing ; before statement upload.js file line 47 which is var uploaded = eval(this.response);

另一个我觉得自己犯了错误的地方是:

a.setAttribute('href', phpval + uploaded[i]);

phpval必须对应动态上传链接。我无法在JS中使用$upload_path，所以用它做了一个div，然后用它来获取值，如下所示:

var phpval = document.getElementById('uploadpath').value;

对于演示，您可以引用此链接，事情会更精确，请打开您的firebug控制台并检查错误并帮助我。我无法解决这个问题。

Dynamic Dropdown File Upload with Progress Indication

谢谢

最佳答案

还要考虑正确定位脚本。有时，您放置脚本的位置可能会导致冲突。我可以看到您已经拥有动态下拉功能的脚本。尝试将其放在表单后面并检查它是否有效。

希望这有帮助。

关于php - 动态下拉文件上传的文件上传进度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14383817/

24 4 0
文章推荐： php - datetimepicker 不想要我的 php 变量
文章推荐： php - 弹出一个带有 php var 的 javascript 对话框
文章推荐： javascript - 获取页面源chrome扩展
文章推荐： javascript - 如何加强单页 Web 应用程序的安全性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com