上传图像时禁用发布按钮

Question

I found a lot of information about disable double click and disable button waiting for fill out the form.

In this particular case, I have a classified ads website and I need to disable the publish button JUST while the image is uploading, not before, not after just to be clear.

Why? because is the user click on submit and the image is not complete uploaded will not going to be posted into the ads.

I hope any of you guys can help me:

I try with something like this:

$(document).ajaxStart(function () {
    $("#submit").prop("disabled", true);
});

And this is my image upload code:

 <?php if(osc_images_enabled_at_items()) {
          if(modern_is_fineuploader() && osc_get_preference('image_upload', 'zara_theme') == 1) {
            ItemForm::ajax_photos();
            echo '</div>';
        } else { ?>
          <div class="row">
            <input type="file" name="photos[]" multiple />
          </div>
        </div>
        <a id="new-pho" href="#" onclick="addNewPhotoZara(); uniform_input_file(); return false;"><?php _e('Add new photo', 'zara'); ?></a>
      <?php } ?>
    </div>
    <?php } ?>

Input:

<button type="submit" class="btn btn-primary" onclick="return loadSubmit()"><?php _e('Publish item', 'zara'); ?></button>

Answer 1

You can use https://github.com/blueimp/jQuery-File-Upload

Take a look on example code for disable and enable property 'disabled' on submit button:

$('#file').simpleUpload("/ajax/upload.php", {

start: function(file){
      $("#submit").prop("disabled", true);
},
progress: function(progress){
    //received progress 
},
success: function(data){
      $("#submit").prop("disabled", false);
},
error: function(error){
    //upload failed 
}
});