scottcheng / cropit

A "customizable crop and zoom" jQuery plugin.
http://scottcheng.github.io/cropit/
MIT License
874 stars 307 forks source link

Upload several images at once and apply to their own cropper instance #234

Open PLAYCUBE opened 7 years ago

PLAYCUBE commented 7 years ago

Hello! Awesome plugin! Now I am wondering how to upload several images using <input type="file" multiple/> I have 6 different instances of the cropit, where I upload 6 images. Since it is no very practical to do an upload on every instance, I want to make a multiple upload solution. The user would see 6 different "Cropit Editors", where he can adjust the area of the photos at one glance.

I have 6 different divs: <div align="center" id="image-cropperNo"> which have their own preview area and input button inside. Now I have a multiple file input tag apart from every instance where I choose 6 files.

In the jquery.cropit.js file I have something here:

key: 'onFileChange',
        value: function onFileChange(e) {
          this.options.onFileChange(e);

          if (this.$fileInput.get(0).files) {
            this.loadFile(this.$fileInput.get(0).files[0]);
          }
        }

So as I understand the program loads everytime the first file. How do I achieve, that every file from the multiple file input array gets processed to every cropper instance?