クラス名を使用して入力ファイルから検証された値を取得する方法は？

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">')関数が1メガバイト（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">