上传文件前验证文件扩展名

Question

上传文件前验证文件扩展名

javascriptjqueryvalidationfile-upload

114

我正在将图片上传到servlet。服务器端通过检查文件头中的魔数来验证上传的文件是否为图像。有没有办法在提交表单到servlet之前，在客户端验证文件扩展名？一旦我按下回车键，它就开始上传。

我在客户端使用JavaScript和jQuery。

更新：最终我采用了服务器端验证方案，读取字节并拒绝上传非图像文件。

- user405398

2

你在之前的问题中，有没有使用Uploadify建议呢？ - BalusC

不，它会在50-96之间停止。我尝试了很多次，使用了各种输入。当时我也很急需解决方案。所以，我尝试了简单的jquery.ProgressBar.js。它运行良好。###那么，我可以用uploadify进行验证吗？ - user405398

我们不能简单地在输入标签中使用accept属性来确保用户选择指定格式的文件吗？ - AnonSar

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3060112 · Answer 1

<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload your Photo...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
                    document.form.word.focus();
                    return false;
                }
            }
        }

        function Doc_upload() {
            var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload Agreement...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("\\");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "txt" || filext == "pdf" || filext == "doc") {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload File with Extension ' txt , pdf , doc '");
                    document.form.word.focus();
                    return false;
                }
            }
        }
</script>

- Andrew · Answer 2

在我看来，这是最佳解决方案，比其他方案要短得多：

function OnSelect(e) {
    var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
    var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;

    if (!isAcceptedImageFormat) {
        $('#warningMessage').show();
    }
    else {
        $('#warningMessage').hide();
    }
}

在这种情况下，函数是从一个带有以下设置的Kendo上传控件中调用的：

.Events(e => e.Select("OnSelect"))。