Laravel, Ajax, Jquery Plugin загрузка изображений, предварительный просмотр, преобразование в эскизы и отображение

Question

Laravel, Ajax, Jquery Plugin загрузка изображений, предварительный просмотр, преобразование в эскизы и отображение

-2

введите описание изображения здесь, чтобы просмотреть загруженные изображения после upload.and, чтобы показать изображение в форме. Удастся добиться этого с помощью загрузки изображения jquery с помощью рамки laravel. помощь приветствуется.

@Simon Я реализовал работу ur code.its, но одно изображение показано в поле зрения, и я хочу показать все три изображения, которые выбраны.Plz help введите описание изображения здесь

user6536248 11 июль 2016, в 13:42

Источник

Теги:

javascript

jquery

laravel

ajax

1 ответ

Ещё вопросы

Simon Davies · Answer 1 · 2016-07-11T18-10-00.000Z

если вы используете стандартный тип ввода файлов и говорите, что используете модный браузер и т.д., тогда вы можете попробовать следующее.

$('#addImage').on('change', function(evt) {
  var selectedImage = evt.currentTarget.files[0];
  var imageWrapper = document.querySelector('.image-wrapper');
  var theImage = document.createElement('img');
  imageWrapper.innerHTML = '';
 
  var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
  if (regex.test(selectedImage.name.toLowerCase())) {
    if (typeof(FileReader) != 'undefined') {
      var reader = new FileReader();
      reader.onload = function(e) {
          theImage.id = 'new-selected-image';
          theImage.src = e.target.result;
          imageWrapper.appendChild(theImage);
        }
        //
      reader.readAsDataURL(selectedImage);
    } else {
      //-- Let the user knwo they cannot peform this as browser out of date
      console.log('browser support issue');
    }
  } else {
    //-- no image so let the user knwo we need one...
    $(this).prop('value', null);
    console.log('please select and image file');
  }

});

.wrapper {
  padding: 25px;
}

.image-wrapper {
  padding: 5px;
  border: 1px #ddd solid;
  height auto;
  width: 200px;
}

.image-wrapper img {
  max-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <input type="file" id="addImage" />
</div>
<div class="image-wrapper">
  
</div>

также можно просматривать на кодексе Exmaple