Question

我正在使用预览图片文件上传多个文件（使用<input type="file" multiple/>），并且可以成功删除图片预览和filedata。

但问题是，我无法更改onclick的选择器以删除filedata。（如果我更改为其他选择器，它只会删除预览图像，但仍然会将filedata上传到我的文件夹中）

单击以成功删除该作品的选择器为.selFile但是何时我想将onclick的选择器更改为.selFile2它不会删除filedata）

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

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

但删除预览图片只是不删除filedata（它仍然会上传到我的文件夹） ..

我尝试更改function removeFile(e)中的代码从var file = $(this).data("file");到var file = $('.selFile).data("file");，结果是它只能删除1个filedata。 ... 我该怎么办？

这是我的完整代码（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页面

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

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

0 个答案: