发表新帖
发表新帖

Image Upload with preview and Delete option - Javascript / Jquery

后端 未结
关注
3 584
执念已碎
执念已碎 2020-12-07 13:15

I have code below that runs perfectly and uploads multiple images.

This is the html and jQuery code:


             


        

                      

              相关标签:
3条回答
  • 执念已碎
    2020-12-07 13:52

    Try adding this : .click(function(){$(this).remove();});. It will remove the image by clicking it.

    EDIT Improved version included.

    EDIT 2 Since people keep asking, please see this answer on manually deleting a file from a FileList (spoiler: it's not possible...).

    $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
    input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

    0 讨论(0)
  • 栀梦
    2020-12-07 14:05

    Multiple Image Upload With Preview And Delete JQuery

    We will learn how to upload multiple images with preview and delete. In this tutorial, we will show you jQuery multiple image upload with preview and delete demo.

    In this tutorial, we can upload many images at once, that too in a very easy way, then today we will upload jquery multiple image upload with preview. jQuery Multiple Image Upload With Preview and Delete Demo

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Image Upload with Preview and Delete jQuery Plugin - phpcodingstuff.com</title>
    <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>
 
    <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
    <script>
      var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images
 
      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>

    0 讨论(0)
  • 长情又很酷
    2020-12-07 14:14

    Use this for remove files values and file preview 

    $(".remove").click(function(){
        $(this).parent(".pip").remove();
        $('#files').val("");
      });`
    0 讨论(0)
 看不清?
提交回复
热议问题