个人中心
gpt4 book ai didi

javascript - PHP Javascript - 无法将选择器 onclick 更改为删除预览文件

转载 作者：行者123 更新时间：2023-11-30 15:36:59 24 4
gpt4 key购买 nike

我正在使用预览图像文件上传多个文件(使用 <input type="file" multiple/> )，并且可以成功删除图像预览和文件数据。

但问题是，我无法更改 onclick 的选择器以删除文件数据。(如果我换成其他选择器，它只会删除预览图像，但文件仍然会上传到我的文件夹)

点击删除成功的选择器是.selFile但当我想将 onclick 的选择器更改为 .selFile2它不会删除文件数据)

这些是我关注的代码行。 (要查看我的完整代码，请查看底部)

    var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' 
title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>";

..

我从

$("body").on("click", ".selFile", removeFile);

到

$("body").on("click", ".selFile2", removeFile);

但它只删除预览图像而不删除文件数据(它仍然被上传到我的文件夹)..

然后我尝试更改 function removeFile(e) 中的代码来自 var file = $(this).data("file");至 var file = $('.selFile).data("file");结果是它只能删除 1 个文件数据。...我该怎么办？

这是我的完整代码(2 页)

firstpage.html(我用ajax发表单)

<!doctype html>
<html>
<head>
<title>Proper Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<style>
    #selectedFiles img {
        max-width: 200px;
        max-height: 200px;
        float: left;
        margin-bottom:10px;
        cursor:pointer;
    }
</style>
</head>

<body>       
    <form id="myForm" method="post"> 
        Multiple Files: <input type="file" id="files" name="files[]" multiple><br/>

        <div id="selectedFiles"></div>

        <input type="submit">
    </form>

    <script>
    var selDiv = "";
    var storedFiles = [];

    $(document).ready(function() {
        $("#files").on("change", handleFileSelect);

        selDiv = $("#selectedFiles"); 
        $("#myForm").on("submit", handleForm);

        $("body").on("click", ".selFile", removeFile);
    });

    function handleFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
        filesArr.forEach(function(f) {          

            if(!f.type.match("image.*")) {
                return;
            }
            storedFiles.push(f);

            var reader = new FileReader();
            reader.onload = function (e) {
                var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'> <span class='selFile2'>" + f.name + "</span><br clear=\"left\"/></div>";
                selDiv.append(html);

            }
            reader.readAsDataURL(f); 
        });

    }

    function handleForm(e) {
        e.preventDefault();

        var data = new FormData();

        for(var i=0, len=storedFiles.length; i<len; i++) {
            data.append('files[]', storedFiles[i]);
        }

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true);

        xhr.onload = function(e) {
            if(this.status == 200) {
                console.log(e.currentTarget.responseText);  
                alert(e.currentTarget.responseText + ' items uploaded.');
            }
        }

        xhr.send(data);
    }

    function removeFile(e) {
        var file = $(this).data("file");
        for(var i=0;i<storedFiles.length;i++) {
            if(storedFiles[i].name === file) {
                storedFiles.splice(i,1);
                break;
            }
        }
        $(this).parent().remove();
    }
    </script>

</body>
</html>

.. upload.php页面

<?php
    for($i=0;$i < count($_FILES["files"]["name"]);$i++)
        {
            if($_FILES["files"]["name"][$i] != "") 
            {       
                $tempFile = $_FILES['files']['tmp_name'][$i];                     

                $targetFile =  "upload/". $_FILES["files"]["name"][$i];  

                move_uploaded_file($tempFile,$targetFile);      
            }
        }
?>

最佳答案

这是因为当浏览器监听 .selFile2 元素的 click 事件时，img 标签成为 event.target (.selFile2).

将点击事件委托(delegate)给 span 标签后，$("body").on("click", ".selFile2", removeFile);

您只需像下面这样稍微修改一下您的removeFile 函数。

function removeFile(e) {
    var img = e.target.parentElement.querySelector("img");
    var file = img.getAttribute('data-file');
    for(var i=0;i<storedFiles.length;i++) {
        if(storedFiles[i].name === file) {
            storedFiles.splice(i,1);
            break;
        }
    }
    $(this).parent().remove();
}

我刚刚测试了代码，它正在我这边运行。

关于javascript - PHP Javascript - 无法将选择器 onclick 更改为删除预览文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41389035/

24 4 0
文章推荐： javascript - React H1 绘制空白
文章推荐： c# - Plinq 里面的 Plinq？
文章推荐： c# - skydrive System.Dynamic.DynamicObject
文章推荐： javascript - 保护我的 Android (Intel XDK) 应用程序免受盗版
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com