Question

我有选择文件后显示图像的代码。但是，我不知道如何删除显示图像。所以，我想在每个图像上都有一个删除按钮，以便用户可以轻松删除。怎么办？

<div id="list" style="width:800px;border:1pt solid black"></div>
  <script>
        var x = 0;
        var y = 0;
        function handleFileSelect(evt) {


        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {


        if(x > 9)
        {
            alert('Total of 10 Images are acceptable');
        }
        else
        {

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['<div id="image"><img class="thumb" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/></div>'].join('');
              document.getElementById('list').insertBefore(span, null);   
            };
          })(f);

          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
        }
        y = i + x;
        x = 0 + y;
        i = 0;  
    }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

如果你想做ajax：

添加1onclick =“deleteImg（'img id或其他'）”; 1

创建JavaScript函数deleteImg

function deleteImg(par){
   // do ajax POST to delete image from db
}

在回复中，您可以制作图像的.hide()

在每个中显示带删除按钮的图像

1 个答案: