I have created and molded a function for uploading multiple image files and just stuck in picReader.readAsDataURL(file); which is creating a huge value of an image. as I want this image to be uploaded in my DB

Actually, its a done function just need to reduce the size of value

window.onload = function() {
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("event-img-result");

            //for(var i = 0; i< files.length; i++)
            for(var i = 0; i<=5; i++)
            {
                var file = files[i];

                //Only pics
                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("div");

                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/><input type='hidden' value='" + picFile.result + "'/><a href='javascript:;'>x</a>";

                    output.insertBefore(div,null);            

                });

                 //Read the image
                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}

1 Answers

0
Dacre Denny On Best Solutions

One way to reduce the file size of your image data would be to reduce the resolution of the original image, and/or encode the image data as a JPEG, in the browser and via the Canvas API. You could then upload the image data of the image with reduced resolution to your database.

This could integrate with your code is as follows, where the dataUrl variable shown below contains the data of the reduced image that should be suitable for storage in your database:

var filesInput = document.getElementById("files");

filesInput.addEventListener("change", function(event) {

  var files = event.target.files; //FileList object
  var output = document.getElementById("event-img-result");

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    //Only pics
    if (!file.type.match('image'))
      continue;

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const orignalImg = new Image();

    orignalImg.onload = function() {

      // Quarter the resolution of the image to reduce it's overall file size
      const newWidth = orignalImg.width * 0.25;
      const newHeight = orignalImg.height * 0.25;

      // Set dimensions of canvas to set dimensions of output image
      canvas.width = newWidth
      canvas.height = newHeight

      // Draw scaled orignal image into canvas
      context.drawImage(orignalImg, 0, 0, newWidth, newHeight);

      // imgSmallData contains image data for the reduced file size
      const imgSmallData = canvas.toDataURL('image/jpeg');

      // Create new image element to demonstrate the technique 
      const imgSmall = new Image()
      imgSmall.src = imgSmallData
      document.body.append(imgSmall)
    }

    orignalImg.src = URL.createObjectURL(file);
  }
});
<input id="files" type="file" />