2013-07-23 2 views
-1

Изображения добавляются как миниатюры, но код для операции удаления не работает. Это мой код ....
что-то пошло не так в «span.innerHtml», я знаю ... но не в состоянии его решить !!
Сценария для операции удаления, как Ненужная ссылка работает нормально .... но когда интегрировано с изображениями в виде эскизов он не работает ....Хотите удалить изображения, добавляемые к эскизам при нажатии ссылки удаления.

//select the files to be added 
<input type="file" id="files" name="files[]"/> 
<output id="list"></output> 

//code for delete operation(after onClick) 
<script> 
$(document).ready(function(){ 
    $('a.delete').on('click',function(e){ 
     e.preventDefault(); 
     imageID = $(this).closest('.image')[0].id; 
     alert('Now deleting "'+imageID+'"'); 
     $(this).closest('.image') 
      .fadeTo(300,0,function(){ 
       $(this) 
        .animate({width:0},200,function(){ 
         $(this) 
          .remove(); 
        }); 
      }); 
    }); 

}); 

</script> 


//code to add images to thumbnails(before onClick) 
<script> 
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 = ['<a href="#" class="delete">Delete<img class="thumb" src="', e.target.result, 
        '" title="', escape(theFile.name), '" width="110" height="150"/></a>'].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); 

</script> 
+0

Когда вы говорите _delete_ вы имеете в виду удаление их со страницы, не так ли? – Joum

+0

Да ... точно ... – Rohini

+0

Не могли бы вы разместить HTML _before_ и _after_ 'onClick'? – Joum

ответ

0

Взятые, что она работает как-то и не работает динамически добавленных изображений, вы должны изменить следующее:

$('a.delete').on('click',function(e){... 

в

$(document).on('click','a.delete', function(e){... 

Этот селектор неверен тоже не ы у вас нет класса CSS под названием «образ»:

$(this).closest('.image') 

Следует (изменил его найти, потому что это дочерний элемент):

$(this).find('img') 

В противном случае, пожалуйста, поделитесь некоторые детали, как это его не работает. Любые ошибки?

Он работает после исправления всех вещей, которые я написал (так что спасибо за минус): http://jsfiddle.net/balintbako/EdkHN/

Также вы, вероятно, хотите, чтобы удалить весь срок: http://jsfiddle.net/balintbako/EdkHN/1/

+0

Он не работает с удалением изображения при нажатии на ссылку DELETE .... Не решено ... – Rohini

+0

См. Обновление с помощью jsfiddles –

+0

- это загруженные изображения, которые отображаются в виде эскизов ?? я этого не нахожу !!! – Rohini

Смежные вопросы