图像上传与预览和删除选项 - Javascript / jquery [英] Image Upload with preview and Delete option - Javascript / Jquery

问题描述

我有下面的代码，完美运行并上传多张图片。

这是html和jQuery代码：

 < div class =fieldalign =left> 
< span> 
< h3>上传您的图片< / h3> 
< input type =fileid =filesname =files []multiple /> 
< / span> 
< / div> 
  

脚本如下：

 <风格> 
 input [type =file] {
 
 display：block; 
} 
 .imageThumb {
最大高度：75px; 
 border：2px solid; 
 margin：10px 10px 0 0; 
 padding：1px; 
} 
< / style> 
< script type =text / javascript> （window.File&& window.FileList&& window.FileReader）{
 $（document）.ready（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; 
 $（< img>< / img>，{
 class：imageThumb，
 src：e.target.result，
 title）：file.name 
））。insertAfter（＃files）; 
}）; 
 fileReader.readAsDataURL（f）; 
} 
} ）; 
} else {alert（您的浏览器不支持File API）} 
}）; 
 
< / script> 
  

该代码添加了多个图片并显示了图片的预览。但是现在我希望当用户点击某个按钮时，可以说每个上传的图片上都有删除，它应该被删除。未隐藏。

对此的任何帮助都将被赞赏！

解决方案

尝试添加这： .click（function（）{$（this）.remove（）;}）; 。它会通过点击来删除图片。

编辑包含改进版本。

  $（document）.ready（function（）{if（window.File& window.FileList&& window.FileReader）{$（＃files）。on（ （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\>删除图片< / span>+< / span>）。insertAfter（＃fil （。）; $（。remove）。click（function（）{$（this）.parent（。pip）。 }）; //旧代码/ * $（< 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 does not 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;背景：＃444;边框：1px纯黑色;白颜色; 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 =fieldalign =left> < h3>上传您的图片< / h3> < input type =fileid =filesname =files []multiple />< / div>

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

This is the html and jQuery code:

<div class="field" align="left">
            <span>
                <h3>Upload your images</h3>
                <input type="file" id="files" name="files[]" multiple />
            </span>
        </div>

The script is as below:

<style>
    input[type="file"] {

     display:block;
    }
    .imageThumb {
     max-height: 75px;
     border: 2px solid;
     margin: 10px 10px 0 0;
     padding: 1px;
     }
    </style>
    <script type="text/javascript">
    $(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;
                    $("<img></img>",{
                        class : "imageThumb",
                        src : e.target.result,
                        title : file.name
                    }).insertAfter("#files");
               });
               fileReader.readAsDataURL(f);
           }
      });
     } else { alert("Your browser doesn't support to File API") }
    });

    </script>

The code adds multiple images and shows previews of the images too. But now I want that when a user clicks on some button, lets say delete on every image uploaded, it should be removed. Not hidden.

Any help to this will be appreciated!

解决方案

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

EDIT Improved version included.

$(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>

这篇关于图像上传与预览和删除选项 - Javascript / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！