javascript - 想要使用 javascript 向此代码添加删除图像

Question

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++) {

   // 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 = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');

    document.getElementById('list').insertBefore(span, null);
};
})(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
 }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

你可以做这样的事情::

function addImage(parentEle) {
 var img = document.createElement("IMG");
 img.setAttribute('src',"Your_image_src_here");
 img.style.position = 'absolute';
 img.style.top = '4px'; 
 img.style.right = '5px'; 
 parentEle.appendChild(img);
}

和

span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
//call the function
addImage(span);
document.getElementById('list').insertBefore(span, null);