javascript-ajax上传系统检查条件_Javascript_Ajax_Upload

javascript-ajax上传系统检查条件

javascript ajax

javascript-ajax上传系统检查条件,javascript,ajax,upload,Javascript,Ajax,Upload,我正在学习一个关于如何使用进度（%）指示器制作javascript/ajax上传系统的教程。我已经成功地添加了一个css进度条指示器。但我有一个问题，我不能解决的是如何把上传的条件，如：类型，文件大小，文件设置。。。。这是我的代码（upload.php）这是javascript文件（upload.js）： var handleUpload=函数（事件）{ event.preventDefault（）； event.stopPropagation（）； var fileInput=do

我正在学习一个关于如何使用进度（%）指示器制作javascript/ajax上传系统的教程。我已经成功地添加了一个css进度条指示器。但我有一个问题，我不能解决的是如何把上传的条件，如：类型，文件大小，文件设置。。。。这是我的代码（upload.php）

这是javascript文件（upload.js）：

var handleUpload=函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
var fileInput=document.getElementById（'file'）；
var data=new FormData（）；
data.append（'ajax'，true）；
对于（变量i=0；i


我只是需要和如何检查文件大小小于50MB的例子，我可以做我自己的其他检查我只是不知道如何检查这个上传系统的条件。
提前感谢
如果您想检查尺寸之类的东西，您可以使用代码轻松实现：
请看一下代码中的这些行：
for（变量i=0；i

这是将文件添加到FormData的位置，然后将FormData提交到服务器。您可以在此处添加条件，例如尺寸检查：
for（变量i=0；iif（fileInput.files[i].size这可能会有帮助@intelis谢谢兄弟，这很有用，但我不知道如何将它应用到我的代码中。我总是破坏我的代码。你的想法看起来不错，但当我尝试它时，它不起作用，上传系统仍然上传任何大小的文件。我想这部分代码是用于上传多个文件的。看看php的第一部分e loop和move_上传的文件。你认为可以将条件放在那里吗？嗯……你确定实际上传了大于给定大小（比如50 MB）的文件吗？你为最大文件大小插入了什么？请注意，这个简单的检查不会给出任何警告。
<?php
foreach($_FILES['file']['name'] as $key => $name){
        if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name'][$key], "files/{$name}")){
            $uploaded[] = $name;
        }
    }
    if(!empty($_POST['ajax'])){
        die(json_encode($uploaded));
    }
?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="upload.js"></script>
</head>
<body>
        <div id="uploaded">
            <?php

            if (!empty($uploaded)){
                foreach ($uploaded as $name){
                    echo '<div><a href="files/',$name,'">',$name,'</a></div>';
                }
            }

            ?>
             </div>
<div id="upload_progress"></div>
        <div>
            <form action="" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file[]" />
<input type="submit" id="submit" value="upload" />
</form>

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) +' %'));
            document.getElementById("loading-progress-17").style.width= 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');
    });
    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;
                for (var i = 0; i < uploaded.length; ++i){
                    div = document.createElement('div');
                    a = document.createElement('a');
                    a.setAttribute('href', 'files/' + 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);
});