jQuery不显眼的验证错误消息的文件类型

Question

我有一个MVC项目，我正在使用jquery不显眼的验证纯粹由标记单独。有一件事情是对我错误的文件MIME类型的验证消息。

下面是一些验证我使用的是普通的文本输入一个例子：

<input class="form-control valid" data-val="true" data-val-regex="not correct regex message." data-val-regex-pattern="^.{0,440}$" id="field1" name="field1" placeholder="max 440 characters" type="text" value=""> 

输入已被简化。但这基本上是我如何使用它，纯粹是“数据”属性。

但是，我不知道的是文件上传。我已经加入了“附加methods.js”文件和“接受”属性与相应的消息正确验证：

<input accept="image/jpeg,image/pjpeg,image/png,image/bmp,image/x-windows-bmp,image/x-ms-bmp" class="dynamicDocumentFileUpload" data-val="true" data-val-required="this is required" id="field2" name="field2" placeholder="file input field" title="upload picture" type="file" value=""> 

如此要求是否按预期运行，如果我尝试上传的文件是不正确的MIME类型，验证将按照预期阻止表单提交。 但是！它只是在“@ Html.ValidationMessageFor”中显示输入的名称。我不知道什么数据属性对应于“接受”验证。

我已经试过这样：

@Html.ValidationMessageFor(m => Model.Groups[g].Fields[f].File, "wrong file type") 

但该消息是错误类型，无论显示，当然。

Answer 1

在MVC（模型视图控制器）中开发时避免使用模型并不是一个好主意。正如MVC的含义所说，大多数情况下，在使用IsValid方法将数据保存到数据库之前，您应该验证模型。我可以给你的建议是忘记你的工作方式，因为它不安全。如果不使用模型的isvalid方法，您应该保护您的网站免受XSS脚本攻击和其他类型的攻击。模型的主要优点是您可以在保存这些数据之前轻松验证它，并且您可以通过创建自己的验证属性来轻松解决此类问题，这将在服务器端和客户端中检查这些数据。忘记你正在做的事情，并试着了解自定义验证。但是，我可以分享这个代码，如果您使用的是模型，它将检查服务器中的文件类型。

 public class FileTypeAttribute : ValidationAttribute 
{ 
    public string thefile{ get; set; } 
    protected override ValidationResult IsValid(object value, ValidationContext validationContext) 
    { 
     PropertyInfo[] propriétés = validationContext.ObjectType.GetProperties(); 
     PropertyInfo lafichies = propriétés.FirstOrDefault(p => p.Name == lefichier); 

     HttpPostedFileBase valFichierChoisi = thefile.GetValue(validationContext.ObjectInstance, null) as HttpPostedFileBase; 
     byte[] chkBytejpg = { 255, 216, 255, 224 }; 
     byte[] chkBytejpg2 = { 255, 216, 255, 225 }; 

     if (value != null && value.Equals(valFichierChoisi)) 
     {//we check the type for jpeg file 
      //------------------------------------------- 
      if (valFichierChoisi.ContentType.ToLower() != "image/jpg" && 
         valFichierChoisi.ContentType.ToLower() != "image/jpeg" && 
         valFichierChoisi.ContentType.ToLower() != "image/pjpeg") 

      { 
       return new ValidationResult(ErrorMessage); 
      } 


      // Attempt to read the file and check the first bytes 
      //------------------------------------------- 
      try 
      { 
       if (!valFichierChoisi.InputStream.CanRead) 
       { 
        return new ValidationResult(ErrorMessage); 
       } 

       if (valFichierChoisi.ContentLength < ImageMinimumBytes) 
       { 
        return new ValidationResult(ErrorMessage); 
       } 

       byte[] buffer = new byte[valFichierChoisi.ContentLength]; 
       valFichierChoisi.InputStream.Read(buffer, 0, valFichierChoisi.ContentLength); 
       string content = System.Text.Encoding.UTF8.GetString(buffer); 
       if (Regex.IsMatch(content, @"<script|<html|<head|<title|<body|<pre|<table|<a\s+href|<img|<plaintext|<cross\-domain\-policy", 
        RegexOptions.IgnoreCase | RegexOptions.CultureInvariant | RegexOptions.Multiline)) 
       { 
        return new ValidationResult(ErrorMessage); 
       } 
       //you compare buffer sequence of file and known byte of jpeg in .net 
       if (chkBytejpg.SequenceEqual(buffer.Take(chkBytejpg.Length))) 
       { 
        return ValidationResult.Success; 
       } 

       else if (chkBytejpg2.SequenceEqual(buffer.Take(chkBytejpg2.Length))) 
       { 
        return ValidationResult.Success; 
       } 

      } 
      catch (Exception) 
      { 
       return new ValidationResult(ErrorMessage); 
      } 

      //------------------------------------------- 
      // Try to instantiate new Bitmap, if .NET will throw exception 
      // we can assume that it's not a valid image 
      //------------------------------------------- 

      try 
      { 
       using (var bitmap = new System.Drawing.Bitmap(valFichierChoisi.InputStream)) 
       { 
       } 
      } 
      catch (Exception) 
      { 
       return new ValidationResult(ErrorMessage); 
      } 


     } 
     return ValidationResult.Success; 

    } 

} 

我做了它的服务器端。对于客户端验证，仅仅因为一个原因使用jquery unobstrusive验证会更困难：它需要返回一个值。让我解释。假设这个验证结果。

$.validator.unobtrusive.adapters.add('fichimage', ['thefile'], 
function (options) { 
    options.rules['fichimage'] = options.params; 
    if (options.message) { 
     options.messages['fichimage'] = options.message; 
    } 
    } 
); 

$.validator.addMethod('fichimage', function (value, element, params) { 
    var lechoifait = $('input[name="' + params.thefile+ '"]').val(); 

    if (value != null && value == lechoifait) { 
    //suppose that your browser allow the use of filereader 
    //know that you can obtain the selected file by using element.files[0] 
    var fr = new FileReader(); 
    fr.onloadend = function (e) { 
    //Because this is done asynchronously 
    // the return will always be true for this validation no matter the kind of file 

//apart of this, if you want to use any callback function, you will use it in this function which don't allows any return 
    }; 
fr.readAsDataURL(element.files[0]); 

     } 
    //this will always be true because of the asynchronously behaviour of onloadend function 
     return true; 

}, ''); 

这就是为什么我建议您实现自己的方式来解决这个
基于答案给由@Drakes（How to check file MIME type with javascript before upload?），我提出了这个答案。

假设在成功的情况下，要加载此图像在图像

<img id="imagetoshow" alt="" src="" style=" width :80%; height :300px; display:none; "/> 

因为您正在使用MVC的工作，你的HTML帮助可能是类似的东西

 @Html.TextBoxFor(m => m.selectedimage, new { type = "file", @class = "someclass", onchange = "checkandshow(this)" }) 
    //this validation message is for checking for server side 
    //try another way if you are not using a model as claimed 
    @Html.ValidationMessageFor(m => m.selectedimage) 
    //you could use this label in the case of incorrect file 
     @Html.Label("", new { id = "badfile", @class = "badimageselected"}) 

在选择图像的情况下（我只检查jpeg），将执行checkandshow（this）函数。为他人类型的文件的签名，请参阅本（https://en.wikipedia.org/wiki/List_of_file_signatures）和/或本（https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern）

function checkandshow(input) { 
//imagetoshow is the id of the image tag where you want to load your image in the case of success 
    $('#imagetoshow').attr('src', ''); 
    //you first check if the element contains any file 
if (input.files && input.files[0]) { 
    // you check if the browser support filereader 
    if (window.FileReader && window.Blob) { 
    //because the browser support this, you create an object of this class 
     var filerdr = new FileReader(); 
     filerdr.onload = function (e) { 
    //this subarray will allows you to check the first 4 bytes of the image 
      var arr = (new Uint8Array(e.target.result)).subarray(0, 4); 
      var header = ""; 
      for (var i = 0; i < arr.length; i++) { 
       header += arr[i].toString(16); 
      } 
    //typeFichier function will allows you obtaining the real mime of the file 
      var letype = typeFichier(header); 
      if (letype != 'image/jpeg') { 
    //in the case that it is not you type of file, just do whatever you want 
    //set the text in the label to prevent the user of this bad file 
    $("#badfile").text('The selected file is not a jpeg or jpg file.'); 
      } 
      else { 
    //in the case of the good real MIME, you remove the text in the label and then load your image to the corresponding place 
       $("#badfile").text(''); 
       //you just load the correct image 
       var loaderfr = new FileReader(); 
       loaderfr.onload = function (c) { 
     //because the image is just show when you select the file, you change display: none and allow it be seen 
        $("#imagetoshow").show() 
        $('#imagetoshow').attr('src', c.target.result); 
       } 
     //this is for loading the image 
       loaderfr.readAsDataURL(input.files[0]); 
      } 
     } 
    //this is for loading the array buffer which will allows the bytes of the file to be checked 
     filerdr.readAsArrayBuffer(input.files[0]); 

    } else { 
     //in the case that File and Blob are not supported 
      $("#imagetoshow").show() 
     //you change the height because you want to reduce the space 
     $('#imagetoshow').height(15); 
     $('#imagetoshow').attr('alt', 'Sorry, your browser do not allows a preview of the selected image, migrate to another version of the browser or to other browser which allows this preview.'); 
    } 


    } 
}; 

非图像类的标签可能是这样的

.nonimage { color: Red;font-weight:bold ; font-size:24px; } 

这里是函数，它允许获得文件的真实MIME

function typeFichier(entete) { 
     switch (entete) { 
      case "ffd8ffe0": 
      case "ffd8ffe1": 
      case "ffd8ffe2": 
       type = "image/jpeg"; 
       break; 
      default: 
       type = "unknown"; 
       break; 
     } 
     return type; 
    }; 

如果您想使用模型，请不要忘记添加必需的属性，以便检查在服务器侧e文件，像这样

[Required(FileType="selectedimage", ErrorMessage = "It seems that your file is incorrect, please try another one.")] 
    public HttpPostedFileBase selectedimage{ get; set; } 

我强烈建议你使用模型这种验证