Help Jquery upload script

2

I'm developing a PHP system with uploading photos, and as I wanted a thumbnail of the photo before sending it to the database, I found the following Jquery function:

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 you click again to add photo, the new photo should replace the one that was already in the thumbnail instead of going to the bank together! I look forward to your teachings.

    
asked by anonymous 11.07.2015 / 00:44

1 answer

1

I advise you to use some jquery plugin to do this, from the one researched by uploadify, it has several customization options, accepts multiple files or just one, just the same as you are looking for. Here's a tutorial = link

    
27.07.2015 / 22:04