Question

如果文件不是jpg，jpeg等，我想将我的文件输入元素设置为null。但是当我将保存HttpPostedFileBase的元素的值设置为null时，它会重新触发change事件并创建错误。有没有办法绕过这个？

我以为我可以在更改事件的开头检查以查看该值是否为null但它不起作用。

这是我的html元素（有两个，因为我隐藏了上传文本框，只是将其显示为按钮）

@Html.TextBoxFor(model => model.StudentImageFileBase, new { @type = "file", id = "selectedFile", style = "display: none;" })
<input type="button" value="Browse For Image" class="btn" id="pictureupload"/>

这是我的javascript检查图像类型。

$(function () {
console.log("ready!");
alert("picture input function entered");

$("#pictureupload").click(function() {
    document.getElementById('selectedFile').click();
});

$("#selectedFile").change(function() {
    //this doesn't work 
    var imgVal = $('selectedFile').val();
    if (imgVal == '')
        return false;

    //check whether browser fully supports all File API
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        //get the file size and file type from file input field
        var fsize = $('#selectedFile')[0].files[0].size;
        var ftype = $('#selectedFile')[0].files[0].type;
        var fname = $('#selectedFile')[0].files[0].name;

        switch (ftype) {
            case 'image/png':
            case 'image/gif':
            case 'image/jpeg':
            case 'image/pjpeg':
                alert("Acceptable image file!");

                break;
            default:
                alert('Unsupported File!');
                $('#selectedFile').val(null); //here is where the onchange gets triggered again and 
                return false;
        }

        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("selectedFile").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };

    } else {
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
        return false;
    }
});
});

Answer 1

所以我想我弄明白了！如果文件不是jpg / gif / etc

，我在下面添加了一行

        default:
            alert('Unsupported File!');
            $("#selectedFile").replaceWith($("#selectedFile").clone(true));
            return false;

它清除了httppostedfilebase memeber，所以当我回发到我的服务器时，值为null。也许这不是一个好的解决方案，但这是我迄今为止所发现的全部内容。只需通过设置其值清除元素就会重新触发更改事件，这是我要避免的。除非有一些简单的逻辑，否则我可以加入可以对抗它的变革事件？

如果图像无效，如何使用jquery清除HttpPostedFileBase

1 个答案: