logo标签列表

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

javascriptjqueryvalidationfile-upload
114

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

我在客户端使用JavaScript和jQuery。

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

2
你在之前的问题中，有没有使用Uploadify建议呢？ - BalusC
不，它会在50-96之间停止。我尝试了很多次，使用了各种输入。当时我也很急需解决方案。所以，我尝试了简单的jquery.ProgressBar.js。它运行良好。###那么，我可以用uploadify进行验证吗？ - user405398
我们不能简单地在输入标签中使用accept属性来确保用户选择指定格式的文件吗？ - AnonSar
22个回答
2
3
通过这个，你仍然可以选择其他文件类型。 - César León
@CésarLeón 是的。用户可以选择所有文件。如果您想限制这一点，您需要进行手动验证。请查看其他答案。 - Madura Pradeep
2

另一个现今的例子是通过Array.prototype.some()。

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));

2

当您想要验证浏览按钮和文件扩展名时，请使用以下代码：

function fileValidate(){ 
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file  in .pdf extension ");

return false;
}
2
当您想要验证浏览按钮和文件扩展名时，请使用此代码。 - Ajay Kumar Gupta
1

使用数组

将所有文件扩展名/ MIME 类型添加到 validExtensions 数组中

const validExtensions = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
const isValidExtension = validExtensions.indexOf(file.mimetype) > -1;
console.log(isValidExtension);
1
[TypeScript]
uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];

// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
    return val === uploadedFileType;
});
1

这里有一种更可重用的方法，假设您使用jQuery

库函数（不需要jQuery）：

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}


String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }

页面功能（需要jQuery支持）：

$("[id*='btnSaveForm']").click(function () {
    if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});
1

这就是在jQuery中的实现方式

$("#artifact_form").submit(function(){
    return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
  });
1
我们可以在提交时检查它，或者可以将该控件的更改事件进行更改。
var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
    if (filePath != "" && !allowedExtensions.exec(filePath)) {
    alert('Invalid file extention pleasse select another file');
    fileInput.value = '';
    return false;
    }
0

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

0
你可以创建一个包含所需文件类型的数组，并使用jQuery中的$.inArray()来检查文件类型是否存在于数组中。
var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];  

// Given that file is a file object and file.type is string 
// like "image/jpeg", "image/png", or "image/gif" and so on...

if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
  console.log('Not an image type');
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接