Help Jquery upload script

Asked

Viewed 86 times

2

I am developing a system in PHP with upload of photos, and as I wanted a thumbnail of the photo before sending to the bank, I found the following function Jquery:

jQuery(function($){

    var fileDiv = document.getElementById("upload3");
    var fileInput = document.getElementById("upload-image3");
    console.log(fileInput);
    fileInput.addEventListener("change",function(e){
      var files = this.files
      showThumbnail(files)
    },false)

    fileDiv.addEventListener("click",function(e){
      $(fileInput).show().focus().click().hide();
      e.preventDefault();
    },false)

    fileDiv.addEventListener("dragenter",function(e){
      e.stopPropagation();
      e.preventDefault();
    },false);

    fileDiv.addEventListener("dragover",function(e){
      e.stopPropagation();
      e.preventDefault();
    },false);

    fileDiv.addEventListener("drop",function(e){
      e.stopPropagation();
      e.preventDefault();

      var dt = e.dataTransfer;
      var files = dt.files;

      showThumbnail(files)
    },false);

    function showThumbnail(files){
      for(var i=0;i<files.length;i++){
        var file = files[i]
        var imageType = /image.*/
        if(!file.type.match(imageType)){
          console.log("Not an Image");
          continue;
        }

        var image = document.createElement("img");
        // image.classList.add("")
        var thumbnail = document.getElementById("thumbnail4");
        image.file = file;
        thumbnail.appendChild(image)

        var reader = new FileReader()
        reader.onload = (function(aImg){
          return function(e){
            aImg.src = e.target.result;
          };
        }(image))
        var ret = reader.readAsDataURL(file);
        var canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        image.onload= function(){
          ctx.drawImage(image,100,100)
        }
      }
    }
});

But this code is supporting multiupload, and that’s the problem. If a photo has already been inserted, when clicking again to add photo, the new photo should replace the one already in the thumbnail instead of going to the bank together! I look forward to your teachings.

javascript jquery
  • 1

    Your input file looks like this: <input type="file" name="img" Multiple> ? If yes just take out the "Multiple" that works as you need.

  • There’s a way you can put the complete codes so I can simulate it here on my machine and help you?

1 answer

1

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.