0

我做了一个动态下拉文件上传系统,用户可以选择工程流,然后是学期,然后是主题,文件被上传到所需的目录。这正常工作。我遇到了 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 控制台并检查错误并帮助我。我无法解决这个问题。

带有进度指示的动态下拉文件上传

谢谢你

4

2 回答 2

1

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

于 2013-01-28T16:41:23.820 回答
1

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

希望这可以帮助。

于 2013-01-31T13:37:04.163 回答