Question

我有一个JavaScript函数，可以显示我想要上传到服务器的图像的预览。在收到预览后，我可以通过单击并删除预览来选择其中一些，但我还需要删除所选文件，以便它们不会上传到服务器。

以下代码可以删除预览但不删除文件。如何改进？

JavaScript的：

$(document).ready(function () {

    $("#image-holder").on('click', '.thumb-image', function () {
        $(this).toggleClass("selectedItem");
    });

    $("#btnDelete").on("click", function () {
        $(".selectedItem").remove();
    });

    $("#fileUpload").on('change', function () {
        //Get count of selected files
        var countFiles = $(this)[0].files.length;
        var imgPath = $(this)[0].value;
        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        var image_holder = $("#image-holder");
        image_holder.empty();
        if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
                //loop for each file selected for uploading.
                for (var i = 0; i < countFiles; i++) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("<img />", {
                            "src": e.target.result,
                            "class": "thumb-image"
                        }).appendTo(image_holder);
                    };
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[i]);
                }
            } else {
                alert("This browser does not support FileReader.");
            }
        } else {
            alert("Please select only images");
        }
    });
});

HTML：

<form method="POST" action="upload" enctype="multipart/form-data">
        <input id="fileUpload" name="file" multiple="multiple" type="file"/>
        <br/>
        <input type="submit" value="Upload">
    </form>
    <button id="btnDelete">Delete</button>

Answer 1

我在使用AngularJS之前完成了这项工作。在这种情况下，我只需将ng-model变量设置为undefined。我还没有对此进行测试，但您应该能够以类似的方式清除<input>值来完成同样的事情。

$("#btnDelete").on("click", function () {
    $(".selectedItem").remove();
    $("#fileUpload").get(0).files[0] = undefined;
    $("#fileUpload").removeAttr('value');
});

收到预览后但在使用FileReader（HTML5）上传到服务器之前删除文件

1 个答案: