Question

我创建了一个动态下拉文件上传系统，用户可以选择工程流，然后是学期，然后是主题，并将文件上传到所需目录。这通常很好。我从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

谢谢

Answer 1

您可以尝试许多JQuery选项。这是来自Blueimp的一个。希望这会有所帮助。

Answer 2

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

希望这会有所帮助。

动态下拉文件上载的文件上载进度

2 个答案: