选择所有文件类型输入字段后提交表单

Question

我有包含 4 个文件类型输入字段的图像上传加载器页面，现在我想要那个，用户应该在选择所有 4 个图像而不是少于 4 个图像文件后提交表单。即在我的页面中，用户可以在选择 1 个文件后提交，但我只是在选择所有文件后提交表单。请帮帮我。

$('#upimg').submit(function() {

  $(".imgp").each(function() {
    var imgnm = $(this).val();
    if (imgnm === '') {
      $("#dialog").html("<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Please select Image to upload.</p>");
      $("#dialog").dialog("open");
      return prevantDefault();
    }
  });
});

<table>
  <tbody>
    <tr>
      <td><strong style="color: red; font-size: larger;">*</strong>
        <input type="file" accept="image/*" name="imgfile[]" id="imgfile" class="imgp">
      </td>
      <td>
        <input placeholder='image name' type="text" size="20" class="inm ui-corner-all ui-widget input" id="imgname" name="imgname[]">
      </td>
    </tr>
    <tr>
      <td><strong style="color: red; font-size: larger;">*</strong>
        <input type="file" accept="image/*" name="imgfile[]" id="imgfile" class="imgp">
      </td>
      <td>
        <input placeholder='image name' type="text" size="20" class="inm ui-corner-all ui-widget input" id="imgname" name="imgname[]">
      </td>
    </tr>
    <tr>
      <td><strong style="color: red; font-size: larger;">*</strong>
        <input type="file" accept="image/*" name="imgfile[]" id="imgfile" class="imgp">
      </td>
      <td>
        <inputp placeholder='image name' type="text" size="20" class="inm ui-corner-all ui-widget input" id="imgname" name="imgname[]">
      </td>
    </tr>
    <tr>
      <td><strong style="color: red; font-size: larger;">*</strong>
        <input type="file" accept="image/*" name="imgfile[]" id="imgfile" class="imgp">
      </td>
      <td>
        <input placeholder='image name' type="text" size="20" class="inm ui-corner-all ui-widget input" id="imgname" name="imgname[]">
      </td>
    </tr>
  </tbody>
  <tr align="center">
    <td colspan="4">
      <input type="submit" value="Submit" id="button" class="ui-state-default ui-corner-all ui-button-text">&nbsp;&nbsp;
      <input type="reset" value="Reset" class="ui-state-default ui-corner-all ui-button-text">
    </td>
  </tr>
  </tfoot>
</table>

我使用了四个输入文件，因为用户可以单独更改图像文件名。 如何设置用户必须在所有 4 张图片选择后提交表单。

Answer 1

试试这个：

小提琴：https://jsfiddle.net/yceyc919/1/

js：

$('.imgp').each(function() {            
    $(this).change(function(){          
        if ($(this).val()){
                $('input:submit').removeAttr('disabled'); 
            }
            else {
                $('input:submit').attr('disabled',true);
            }
        var file_size = $(this)[0].files[0].size;
        var imgkbytes = Math.round(parseInt(file_size)/1024);
        if(file_size>256001) {
            $("#uplod").html("<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>File size is too large "+imgkbytes+"kb.</p>");
            $("#uplod").dialog("open");
            $(this).val(null);
        }
    });
});

   $('#button').on("click",function(e) {
       var error = false;
   if($("#gallery").val() == 0)
   {
      $("#dialog").html("<p><span class='ui-icon ui-icon-alert'     style='float:left; margin:0 7px 20px 0;'></span>Please select the Gallery Name.</p>");
       error = true;                
   }       

     $(".imgp").each(function(){
        var imgnm = $(this).val();  
        if(imgnm == ''){
            $("#dialog").append("<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Please select Image to upload.</p>");           
            error = true;
        }
        });
  if(error)
  {
      $("#dialog").dialog();
      e.preventDefault();
  }
});