Javascript 将事件处理程序附加到类_Javascript_Ajax

Javascript 将事件处理程序附加到类

javascript ajax

Javascript 将事件处理程序附加到类,javascript,ajax,Javascript,Ajax,所以我遵循了PHP学院关于构建JS AJAX文件上传脚本的教程这是index.php： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Dokument bez tytułu</title> <link rel="stylesheet" href="css/global.css">

所以我遵循了PHP学院关于构建JS AJAX文件上传脚本的教程

这是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>


多库明特·贝兹·泰图尤
威利吉·兹杰西亚：
Wysłane zdjęcia pojawiąsięw tym miejscu。
document.getElementById（'submit'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var f=document.getElementById（'file'），
pb=document.getElementById（'pb'），
pt=document.getElementById（'pt'）；
app.uploader({
档案：f，
进度条：pb，
正文：pt，
处理器：“upload.php”，
完成：函数（数据）{
var uploads=document.getElementById（'uploads'），
成功=document.createElement（'div'），
失败=document.createElement（'div'），
锚，
跨度
x；
if（data.failed.length）{
failed.innerHTML=“Następujące pliki niestty nie zostały wysłane:”；
}
uploads.innerText=''；
对于（x=0；x


和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));

var-app=app | |{}；
（职能（o）{
“严格使用”；
//普赖沃特方法
var ajax、getFormData、setProgress；
ajax=函数（数据）{
var xmlhttp=new XMLHttpRequest（），已上载；
addEventListener（'readystatechange'，function（）{
if（this.readyState==4）{
如果（this.status==200）{
upload=JSON.parse（this.response）；
如果（o.options.finished的类型==='function'）{
o、 选项。完成（上传）；
}
}否则{
if（o.options.error的类型=='function'）{
o、 options.error（）；
}
}
}
});
xmlhttp.upload.addEventListener（'progress'，函数（事件）{
风险值百分比；
if（event.lengthComputeable==真）{
百分比=数学舍入（（event.loaded/event.total）*100）；
进度（百分比）；
}
});
open（'post'，o.options.processor）；
发送（数据）；
};
getFormData=函数（源）{
var data=new FormData（），i；
对于（i=0；i

现在我的问题来了。我想创建额外的功能，允许用户删除他刚刚上传的文件，即意外
我的做法是：

在每个文件中添加一个按钮，该按钮的classdelete
，id等于文件名
执行ajax post请求后，取消链接
将根据通过id传递的文件名删除该文件
完成ajax请求后，js脚本将从页面中删除文件

由于我无法将click event listener附加到类（因此我可以说this.id
），我对它有点迷茫，不知道如何使用纯js根据类获得所需的id，我想在jquery中这是可能的，并且很容易解决，但这是纯js，所以我不想重新编码它。有人有想法吗？
不确定我是否理解这个问题。如果要向每个文件添加按钮以删除该文件，可以使用事件委派轻松附加事件处理程序。这意味着您可以将单击事件附加到文档，该文档将事件委托给所有按钮，这些按钮可能已经存在于DOM中，也可能是以后添加的。例如：
$(document).on("click", ".deletebutton", function(){ ...

任何静态父元素都可以用作事件委派的容器元素，而不是$（document）。
在函数中，您可以使用例如$（this）.attr（“ID”）获取ID。即使问题出现在其他地方（例如，为每个可被删除的按钮添加事件
document.onclick = function (event) {
  var el = event.target;
  if (el.className == "delete" && el.nodeName == "INPUT") {
    alert("delete button clicked");
  }
 };