jQueryropbox如何上传图片

Question

There is a plugin for jquery https://github.com/acornejo/jquery-cropbox . I just don't understand how to extract this cropped image and put it into $_FILES(php), so I can save it to my server folder.

Answer 1

You can do it by DATA property of the image.

To do the said process (loading a preview of the image file), HTML5's FileReader API.

Using the FileReader API is actually simple, and it can be done like so:

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);

You can place this code inside your onchange event handler, and I guess you won't be needing AJAX in here.

Then when the form gets submitted, the image data can be obtained in its usual place, in the $_FILES array.