Как сделать мгновенное изменение изображения?

Question

[XenTerSeO]

Есть шаблон:

<div class="account">
		<div class="col-md-2" style="text-align: center; margin-bottom:20px;">
			<div class="account-picture-block text-center">
        <form id="uploadForm" method="post" enctype="multipart/form-data">
          <label for="userPhotoInput">
            <img id="user-current-picture" class="user-profile-picture" src="{picture}">
          </label>
         <input type="file" id="userPhotoInput" name="files[]">
         </form>
          <div class="upload_avatar_buttons">
            <button id="pictureUploadSubmitBtn" class="enter_upload_avatar">
              <i class="fa fa-check"></i>
            </button>
          </div>
        </div>
			</div>
</div>

При клике на аватарку

<img id="user-current-picture" class="user-profile-picture" src="{picture}">

появляется окно выбора изображения. После чего нужно нажать на кнопку

<button id="pictureUploadSubmitBtn" class="enter_upload_avatar">
    <i class="fa fa-check"></i>
 </button>

для сохранения изображения.

Как сделать, чтобы смена изображения происходила моментально после выбора файла, без нажатия на кнопку?

Скрипт следующий:

$('#pictureUploadSubmitBtn').off('click').on('click', function() {
			uploadForm.submit();
		});

	function handleImageUpload() {
		function onUploadComplete(urlOnServer) {
			urlOnServer = urlOnServer + '?' + new Date().getTime();

			$('#user-current-picture').attr('src', urlOnServer);
			$('#user-uploaded-picture').attr('src', urlOnServer);
			updateHeader(urlOnServer);
			uploadedPicture = urlOnServer;
		}


		$('#upload-picture-modal').on('hide', function() {
			$('#userPhotoInput').val('');
		});


			$('#change-picture-modal').modal('hide');
			uploader.open(config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadpicture', {}, config.maximumProfileImageSize, function(imageUrlOnServer) {
				onUploadComplete(imageUrlOnServer);
			});

			return false;
	}

Answer 1

[Павел Волынцев]

Вызывать отправку формы после выбора файла

<form id="uploadForm" method="post" enctype="multipart/form-data">
   <input type="file" id="userPhotoInput" name="files[]">
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#userPhotoInput').on('change', function() { this.form.submit(); });
});
</script>

Answer 2

[Алексей Уколов]

Если вы хотите что-то делать при изменении значения инпута, то и нужно слушать его события - вот так:

var uploadForm = $('#uploadForm');

$('#userPhotoInput').on('change', function () {
    uploadForm.submit();
});