JQuery auto-submit form after image upload - Not Submit button

Question

I would like to auto-submit form after image upload. The form is being processed on the same page. so i dont have if(isset($_POST["submit"])) {

<div class="container">
  <h1>jQuery Image Upload 
    <small>with preview</small>
  </h1>
  <div class="avatar-upload">
    <form id="formImageUpload" action="#" method="post" enctype="multipart/form-data">
      <div class="avatar-edit">
        <input type='file' id="imageUpload" name="imageUpload" accept=".png, .jpg, .jpeg" onchange="this.form.submit()"  />
        <label for="imageUpload"></label>
      </div>
    </form>

    <div class="avatar-preview">
      <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);" onchange="this.form.submit()" >
      </div>
    </div>
  </div>
</div>

jquery file is:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#imagePreview').css('background-image', 'url('+e.target.result +')');
        $('#imagePreview').hide();
        $('#imagePreview').fadeIn(650);
        $("#formImageUpload" ).submit();
    }
    reader.readAsDataURL(input.files[0]);
  }
}


$("#imageUpload").change(function() {   
   readURL(this);
});

I think calling onchange="readURL(this)" will do work for you. — Bijay Koirala
– Bijay Koirala, Commented May 7, 2019 at 9:57
Can you please remove # from action : <form id="formImageUpload" action="#" method="post" enctype="multipart/form-data"> and then try to submit — Jaimin Rlogical
– Jaimin Rlogical, Commented May 7, 2019 at 10:07

labu4bd · Accepted Answer · 2019-05-07 12:42:25Z

So, your answer is like this:

<div class="container">
  <h1>jQuery Image Upload <small>with preview</small></h1>
  <div class="avatar-upload">
    <form id="formImageUpload" action="#" method="post" enctype="multipart/form-data">
      <div class="avatar-edit">
        <input type='file' id="imageUpload" name="imageUpload" accept=".png, .jpg, .jpeg" onchange="readURL(this)"  />
        <label for="imageUpload"></label>
      </div>
    </form>

    <div class="avatar-preview">
      <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);" ></div>
    </div>
  </div>
</div>

JS:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#imagePreview').css('background-image', 'url('+e.target.result +')');
      $('#imagePreview').hide();
      $('#imagePreview').fadeIn(650);
      $("#formImageUpload" ).submit();
    }
    reader.readAsDataURL(input.files[0]);
  }
}

Collectives™ on Stack Overflow

JQuery auto-submit form after image upload - Not Submit button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related