JQuery кадрирование, как загрузить изображение

Question

Есть плагин для jquery https://github.com/acornejo/jquery-cropbox. Я просто не понимаю, как извлечь это обрезанное изображение и поместить его в $ _FILES (php), поэтому я могу сохранить его в своей папке на сервере.

Answer 1

Вы можете сделать это с помощью свойства DATA изображения.

Для выполнения указанного процесса (загрузка предварительного просмотра файла изображения) используется HTML5 FileReader API.

Использование FileReader API - этона самом деле все просто, и это можно сделать так:

Javascript

var logo = document.getElementById("logo").files[0]; // will return a File object containing information about the selected file
// File validations here (you may want to make sure that the file is an image)

var reader = new FileReader();
reader.onload = function(data) {
  // what you want to do once the File has been loaded
  // you can use data.target.result here as an src for an img tag in order to display the uplaoded image
  someImageElement.src = data.target.result; // assume you have an image element somewhere, or you may add it dynamically
}
reader.readAsDataURL(logo);

Вы можете поместить этот код в свой обработчик события onchange, и я думаю, вы выиграли 'здесь не нужен AJAX.

Затем, когда форма отправлена, данные изображения могут быть получены в обычном месте, в массиве $ _FILES.