Question

所以我按照这个关于构建JS AJAX文件上传脚本的PHP学院教程

这是index.php：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dokument bez tytułu</title>
        <link rel="stylesheet" href="css/global.css">
    </head>
    <body>
        <form action="upload.php" method="post" enctype="multipart/form-data" id="upload" class="upload">
            <fieldset>
                <legend>Wyślij zdjęcia:</legend>
                <input type="file" id="file" name="file[]" required multiple>
                <input type="submit" id="submit" name="submit" value="Wyślij">
            </fieldset>

            <div class="bar">
                <span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
            </div>

            <div id="uploads" class="uploads">
                Wysłane zdjęcia pojawią się w tym miejscu.
            </div>

            <script src="js/upload.js"></script>
            <script>

                document.getElementById('submit').addEventListener('click', function(e) {
                    e.preventDefault();

                    var f = document.getElementById('file'),
                        pb = document.getElementById('pb'),
                        pt = document.getElementById('pt');

                    app.uploader({
                        files: f,
                        progressBar: pb,
                        progressText: pt,
                        processor: 'upload.php',

                        finished: function(data) {
                            var uploads = document.getElementById('uploads'),
                                succeeded = document.createElement('div'),
                                failed = document.createElement('div'),

                                anchor,
                                span,
                                x;

                            if(data.failed.length) {
                                failed.innerHTML = '<p>Następujące pliki niestety nie zostały wysłane:</p>';
                            }

                            uploads.innerText = '';

                            for(x = 0; x < data.succeeded.length; x = x + 1) {
                                anchor = document.createElement('a');
                                anchor.href = 'uploads/' + data.succeeded[x].file;
                                anchor.innerText = data.succeeded[x].name;
                                anchor.target = '_blank';

                                succeeded.appendChild(anchor);
                            }

                            for(x = 0; x < data.failed.length; x = x + 1) {
                                span = document.createElement('span');
                                span.innerText = data.failed[x].name;

                                failed.appendChild(span);
                            }

                            uploads.appendChild(succeeded);
                            uploads.appendChild(failed);

                        },

                        error: function() {

                        }
                    });
                });
            </script>

        </form>
    </body>
</html>

和js.php：

var app = app || {};

(function(o) {
    "use strict";

    // Prywatne metody
    var ajax, getFormData, setProgress;

    ajax = function(data) {
        var xmlhttp = new XMLHttpRequest(), uploaded;

        xmlhttp.addEventListener('readystatechange', function() {
            if(this.readyState === 4) {
                if(this.status === 200) {
                    uploaded = JSON.parse(this.response);

                    if(typeof o.options.finished === 'function') {
                        o.options.finished(uploaded);
                    }
                } else {
                    if(typeof o.options.error === 'function') {
                        o.options.error();
                    }
                }
            }
        });

        xmlhttp.upload.addEventListener('progress', function(event) {
            var percent;

            if(event.lengthComputable === true) {
                percent = Math.round((event.loaded / event.total) * 100);
                setProgress(percent);
            }

        });

        xmlhttp.open('post', o.options.processor);
        xmlhttp.send(data);
    };

    getFormData = function(source) {
        var data = new FormData(), i;

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

        data.append('ajax', true);

        return data;
    };

    setProgress = function(value) {
        if(o.options.progressBar !== undefined) {
            o.options.progressBar.style.width = value ? value + '%' : 0;
        }

        if(o.options.progressText !== undefined) {
            o.options.progressText.innerText = value ? value + '%' : '';
        }
    };

    o.uploader = function(options) {
        o.options = options;

        if(o.options.files !== undefined) {
            ajax(getFormData(o.options.files.files));
        }
    };

}(app));

现在问题我有。我想创建其他功能，允许用户删除他刚刚上传的文件，即意外。

我的方法是：

为每个文件附加一个按钮delete，id等于文件名
执行ajax post请求后unlink会根据通过id
完成ajax请求后，js脚本将从页面中删除文件

因为我无法将click事件监听器附加到类（所以我可以说this.id）我有点迷失它，不知道如何根据纯粹的js类获得所需的id，我想在jquery中将是可能的，并且很容易解决，但这是纯粹的js所以我不想重新编码它。有人有想法吗？

Answer 1

不确定我是否理解这个问题。如果要为每个文件添加按钮以删除文件，可以使用事件委派轻松附加事件处理程序。这意味着您附加了点击事件，例如对于将事件委托给所有按钮的文档，它们可能已存在于DOM中或稍后添加。例如：

$(document).on("click", ".deletebutton", function(){ ...

而不是$(document)任何静态父元素都可以作为事件委托的容器元素。在该功能中，您可以使用例如ID获取ID。 $(this).attr("id")。即使问题出在其他地方（例如，为每个可以完成的按钮添加事件），这种方法可能更经济。

如果jquery不是一个选项，可以使用纯Javascript完成 - 就像示例：Fiddle
在示例删除按钮中，类为＃34;删除＆＃34;是通过单击创建按钮创建的。点击事件由

处理

document.onclick = function (event) {
  var el = event.target;
  if (el.className == "delete" && el.nodeName == "INPUT") {
    alert("delete button clicked");
  }
 };

正如您为删除按钮添加特定类一样，可以删除对nodeName的检查。为每个删除按钮添加唯一ID，检查onclick-function中的ID并调用该函数来处理删除单击。

将事件处理程序附加到类

1 个答案: