How to use compress.js for multiple image compression, preview and upload?

问题

I have been using compress.js for single image upload. But, now i want to use this for multiple image uploads.

What i want to achieve is to select multiple image from html input element and then compress it using this library and also preview those compressed images in dynamically generated tag.

like this:-

<img id="preview0"> <img id="preview1"> <img id="preview2"> ....depending on number of image selected.

This is how i was using it for single image upload

<input type="file" accept="image/*"   id="image">
<img id="preview">

const options = {
  targetSize: 0.2,
  quality: 0.75,
  maxWidth: 800,
  maxHeight: 600
}

const compress = new Compress(options)
const upload = document.getElementById("image")

upload.addEventListener(
  "change",
  (evt) => {
    const files = [...evt.target.files]
    compress.compress(files).then((conversions) => {
      // Conversions is an array of objects like { photo, info }.
      // 'photo' has the photo data while 'info' contains metadata
      // about that particular image compression (e.g. time taken).

      const { photo, info } = conversions[0]

      console.log({ photo, info })

     // was using this to append to the form data
      newblob = photo.data;

      // Create an object URL which points to the photo Blob data
      const objectUrl = URL.createObjectURL(photo.data)

      // Set the preview img src to the object URL and wait for it to load
      Compress.loadImageElement(preview, objectUrl).then(() => {
        // Revoke the object URL to free up memory
        URL.revokeObjectURL(objectUrl)
      })
    })
  },
  false
)

i have been trying to achieve it from past 2 days. i tried to run this in a for loop

<input type="file" accept="image/*" multiple id="image"> <div id="" class="col previewdiv"></div>

$(function() {

    var imgPreviewUpld = function(input, divId) {

        if (input.files) {
            var numberOfImages = input.files.length;

            for (i = 0; i < numberOfImages; i++) {




                $($.parseHTML('<img>')).attr({id : "preview"+i, class:"img-fluid"}).css({"max-height":"200px","max-width":"300px"}).appendTo(divId);

                               const options = {
                                    targetSize: 0.2,
                                    quality: 0.75,
                                    maxWidth: 800,
                                    maxHeight: 600
                                        }
                                        const compress = new Compress(options)


                                const files = [...input.files]
                                                // const files = [evt.files];
                                compress.compress(files).then((conversions) => {
                                // Conversions is an array of objects like { photo, info }.
                                // 'photo' has the photo data while 'info' contains metadata
                                // about that particular image compression (e.g. time taken).

                                const { photo, info } = conversions[0]

                                console.log({ photo, info })

                                //to append to the form data
                                newblob+i = photo.data;
                                // Create an object URL which points to the photo Blob data
                                const objectUrl = URL.createObjectURL(photo.data)

                                // Set the preview img src to the object URL and wait for it to load
                                Compress.loadImageElement(preview+i, objectUrl).then(() => {
                                    // Revoke the object URL to free up memory
                                    // URL.revokeObjectURL(objectUrl)
                                })
                                })                               

            }




        }

    };

    $('#image').on('change', function(evt) {
        imgPreviewUpld(this, 'div.previewdiv');




    });
});

Please guys help me. I am a beginner in javascript world but i want to do this for one of my own project.

Thank you

来源：https://stackoverflow.com/questions/61286641/how-to-use-compress-js-for-multiple-image-compression-preview-and-upload