如何使用类名从输入类型文件获取验证值？

Question

上传图片后，是否显示错误信息大于1MB。

var fileProjectTitle = ""; 
 
var count = 1; 
 
$(document).on("change", ".idProjectTitle", function (e) { 
 
    debugger 
 
    var file_size = $(this)[0].files[0].size; 
 
    if (file_size > 1000141) { 
 
     $("#txtProjectTitle").attr("placeholder", "Upload Image"); 
 
     var message = "Image size is greater than 1MB."; 
 
     errormesssage(message);  
 
     return false; 
 
    } 
 

 
    fileProjectTitle = $(this).val(); 
 
    var ext = fileProjectTitle.split('.').pop(); 
 
    if (ext == "x-png" || ext == "jpeg" || ext == "gif" || ext == "jpg") { 
 
     if (count <= 10) { 
 
      var datatoappend = '<div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle-' + count + '" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div id="clearbtn-' + count + '" class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-' + count + '" ></div></div></div></div>'; 
 
      $("#txtProjectTitle-" + (count - 1)).attr('placeholder', $(this).val().split('\\').pop()); 
 
      var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>'; 
 
      var btnView = '<div id="idImgView" class="browse btn btn-primary">View</div>'; 
 
      $('#clearbtn-' + (count - 1)).find('.browse').hide(); 
 
      $('#clearbtn-' + (count - 1)).append(btnDelete); 
 
      $('#clearbtn-' + (count - 1)).append(btnView); 
 
      $("#projectidAppe").append(datatoappend); 
 
     } 
 
     count++; 
 
    } 
 
    else {  
 
     return false; 
 
    } 
 
});

<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-0">

但是包含该图像细节$('.idProjectTitle')。如果图像的尺寸大于1mb，我该如何避免保存图像信息的类.idProjectTitle？

Answer 1

使用$(this).replaceWith('<input type="file">')函数来除去附着的图像，如果它比1MB（1048576）更大。

var fileProjectTitle = ""; 
 
var count = 1; 
 
$(document).on("change", ".idProjectTitle", function (e) { 
 
    //debugger 
 
    var file_size = $(this)[0].files[0].size; 
 
    if (file_size > 1048576) { 
 
     $("#txtProjectTitle").attr("placeholder", "Upload Image"); 
 
     var message = "Image size is greater than 1MB."; 
 
     alert(message); 
 
     $(this).replaceWith('<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-0">'); 
 
     return false; 
 
    } 
 

 
    fileProjectTitle = $(this).val(); 
 
    var ext = fileProjectTitle.split('.').pop(); 
 
    if (ext == "x-png" || ext == "jpeg" || ext == "gif" || ext == "jpg") { 
 
     if (count <= 10) { 
 
      var datatoappend = '<div class="form-group file-uploader"><div class="input-group col-xs-12"><span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span><input type="text" id="txtProjectTitle-' + count + '" style="height: 35px !important" class="form-control input-lg" disabled placeholder="Upload Image"><div id="clearbtn-' + count + '" class="input-group-btn"><div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-' + count + '" ></div></div></div></div>'; 
 
      $("#txtProjectTitle-" + (count - 1)).attr('placeholder', $(this).val().split('\\').pop()); 
 
      var btnDelete = '<div id="idImgDelete" class="browse btn btn-primary">Delete</div>'; 
 
      var btnView = '<div id="idImgView" class="browse btn btn-primary">View</div>'; 
 
      $('#clearbtn-' + (count - 1)).find('.browse').hide(); 
 
      $('#clearbtn-' + (count - 1)).append(btnDelete); 
 
      $('#clearbtn-' + (count - 1)).append(btnView); 
 
      $("#projectidAppe").append(datatoappend); 
 
     } 
 
     count++; 
 
    } 
 
    else {  
 
     return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" accept="image/*" class="idProjectTitle file" multiple="multiple" name="fileUploadphoto-0">