使用jquery的自定义文件输入会限制用户文件类型和文件名，如果用户单击复选框则会禁用文件输入 [英] Custom file input using jquery restrict the user file types and filename if the user click check box it input file disable

问题描述

当前正在上载文件

1. 在其中只能显示文件名的文本字段中，用户只能上传 jpeg 和 pdf 文件.
2. 小于5mb

3. 如果用户单击该复选框，则不允许该文件被禁用

1. where the user can upload only jpeg and pdf files n the text field it has to show the filename.
2. less than 5mb

3. If user click the checkbox it should not allow to atthach file it should be disabled

在这里，我很困惑如何设置文件类型，限制大小和如何禁用.

Here I was confused how to set the filetypes, restrict size & how to disabled.

这是直到现在我尝试过的我的jquery代码

Here is my jquery code till now i tried

     var $preview = $(".preview");
//var $acceptdiv = $("#accept_div");
//$acceptdiv.hide();
$preview.hide();
$(".check").on("change", function(){     
    var filename = this.value;
    var files = this.files;
    var URL = window.URL||window.webkitURL;
    var url = URL.createObjectURL(files[0]);
    $preview.attr("href", url);
    $preview.show();
    //$acceptdiv.show();
    document.getElementById('file_name').value = filename;
    $("#file_name").prop("disabled", true);
});
/* health infor addmore ends here*/

$(document).on('click', ".accpt_chk", function() {
    alert("check");
    if($('.accpt_chk').prop(':checked')) {
            $('.checkfile').prop('disabled', true);
        } else {
            $('.checkfile').prop('enabled', false);
            //$(this).closest("#btn_selct").removeClass('cst_select').addClass('cst_select_dis');
            //$('#btn_selct').hasClass('.cst_select ').remove().addClass('.cst_select_dis');
        }   
    //$('.qq-upload-button').prop('disabled', !this.checked);
});

这是小提琴链接

请帮助我

感谢前进

推荐答案

1.要检查是否已选中复选框，请使用.is(':checked') 像if ($('.accpt_chk').is(':checked')) {}
2.要添加属性，可以使用.attr('name','value')

1.To check whether a checkbox is selected or not you have use .is(':checked') like if ($('.accpt_chk').is(':checked')) {}
2. To add an attribute you can use .attr('name','value')

演示

更新的Js的一部分

$(document).on('click', ".accpt_chk", function() {
  if ($('.accpt_chk').is(':checked')) {
    $('.checkfile').attr('disabled', 'true')
  } else {
    $('.checkfile').removeAttr('disabled')
    $('.checkfile').prop('enabled', false);
    $(this).closest("#btn_selct").removeClass('cst_select').addClass('cst_select_dis');
    //$('#btn_selct').hasClass('.cst_select ').remove().addClass('.cst_select_dis');
  }
  //$('.qq-upload-button').prop('disabled', !this.checked);
});

这篇关于使用jquery的自定义文件输入会限制用户文件类型和文件名，如果用户单击复选框则会禁用文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！