如何在上传视频之前禁用按钮?

时间:2016-10-17 13:11:18

标签: php codeigniter

我有一个表单,我想上传图片和视频,并且必须填写一些信息。在完成表单之前,提交按钮被禁用,在完成视频和图像上传并且所有字段都已填写后,必须启用它。

$("#uploadify").uploadify({
  height        : 30,
  swf           : urljs+'/public/js/uploadify.swf',
  uploader      : urljs+'/public/js/uploadify.php',
  folder        : "../../../uploads",
  width         : 120,
  fileSizeLimit : '200000KB',
  fileTypeDesc  : 'Video Files',
  fileTypeExts  : '*.*;',
  formData      : {
     folder : '../../private/<?php echo $userId;?>'
  },
  onUploadSuccess : function(file, data, response) {
      $("[name=coursebanner]").val(file.name);
      $("[name=banner]").attr("src",'<?php echo base_url();?>private/<?php echo $userId;?>/'+file.name);
  }
});
$(".filedtls").hide();
$("#contentupload").uploadify({
    height        : 30,
    swf           : urljs+'/public/js/uploadify.swf',
    uploader      : urljs+'/public/js/uploadify.php',
    folder        : "../../../uploads",
    width         : 120,
    fileSizeLimit : '40MB', 
    fileTypeDesc  : 'Video Files',
    fileTypeExts  : '*.*;',
    formData      : {
       folder : '../../private/<?php echo $userId;?>/beforeconvert',
       folder1 : '../../private/<?php echo $userId;?>',
       userId : <?php echo $userId?>
    },
    'onComplete': function(event, queueID, fileObj, response, data) {       
   console.log(response);
 },
 'onUploadSuccess' : function(file, data, response) {
        $("[name=promovideoname]").val(file.name);
    }
  });


   $('#createcoursebasicform > input').keyup(function() {

    var empty = false;
    $('#createcoursebasicform > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#save').attr('disabled', 'disabled');
    } else {
        $('#save').removeAttr('disabled');
    }
});

<div class="col-md-9">
    <form id="createcoursebasicform">
      <input type="hidden" name="courseId" value="<?php echo $courseId;?>"/>
          <div class="create-course-content">

             <!-- COURSE BANNER -->
              <div class="course-banner create-item">
                 <div class="row">
                    <div class="col-md-3">
                      <h4>Course Banner</h4>
                     </div>
                     <div class="col-md-9">
                        <div class="image-info">
                        <img name="banner" src="<?php echo base_url();?>public/images/placeholder.jpg" alt="">
                         </div>
                         <input type="hidden" name="coursebanner"/>
                         <div class="upload-recrop">
                           <div class="upload-image up-file" id="uploader">
                              <a href="#"><i class="icon md-upload"></i><div id="uploadify"></div></a>
                           </div>

                         </div>
                      </div>
                   </div>
                </div>
            <!-- END / COURSE BANNER -->
            <!-- PROMO VIDEO -->
             <div class="promo-video create-item">
                <div class="row">
                    <div class="col-md-3">
                      <h4>Promo Video</h4>
                    </div>
                    <div class="col-md-9">
                      <div class="form-item">
                         <input type="text" placeholder="Paste URL">
                      </div>
                      <div class="upload-video up-file">
                                    or
                       <a href="#"><i class="icon md-upload"></i><div id="contentupload"></div></a>

                        <input type="hidden" name="promovideoname">
                      </div>
                    </div>
                 </div>
               </div>

              <div class="duration create-item">
                  <div class="row">
                      <div class="col-md-3">
                         <h4>Duration</h4>
                       </div>
                       <div class="col-md-9">
                          <div class="duration-ct">
                             <div class="form-item">
                                <input type="text" name="duration">
                             </div>
                             <span class="day">days</span>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="form-action">
                    <input id="save" type="submit" value="Save and Next" class="submit mc-btn-3 btn-style-1" disabled="disabled">
                  </div>
               </form>
           </div>

3 个答案:

答案 0 :(得分:1)

我总是使用JavaScript来禁用和启用提交按钮。

<强> HTML

<input type="submit" id="switch" value="xxxx" disabled="disabled" />

您可能希望在上传完成后传递标记。说Finish,并将其放在Json中,然后您可以使用AJAX从服务器获取Finish

的JavaScript

 $.ajax({
  url: "test.php",
  dataType: "json", 
  success: function(data){ 
    data.Finish ? $switch.attr('disabled', true) : $switch.removeAttr('disabled');
  }
});

答案 1 :(得分:0)

您可以使用带有Ajax调用的jQuery来提交和使用:

 beforeSend

禁用提交按钮!

答案 2 :(得分:0)

当您从用户处获取$ _post或$ _get请求时,请使用html代码以下禁用按钮

 <input type="Submit" value="Upload" <?php echo $disable; ?> />

$ if($ _ post)或get语句的禁用值是NUll或''。如果条件使用$ disable ='disabled';

上传所有文件和数据,当你达到EOF时,$ disable = Null。