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

Question

上传图片后，如果大于1MB显示错误消息。

＆＃13;

＆＃13;

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;
    }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但$('.idProjectTitle')包含图片细节。如果图像的大小超过1mb，如何避免保留图像信息的类.idProjectTitle？

Answer 1

如果附加的图像大于1MB（1048576），请使用$(this).replaceWith('<input type="file">')功能删除附件。

＆＃13;

＆＃13;

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;
    }
});

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;