Предварительный просмотр нескольких изображений перед загрузкой

Я хочу просмотреть несколько изображений, но проблема в том, что мои коды просто работают, если я загружаю 2 изображения. Я хочу просмотреть столько, сколько пользователь загружает.Предварительный просмотр нескольких изображений перед загрузкой

это мой JavaScript:

var abc = 0; //Declaring and defining global increement variable 

$(document).ready(function() { 


$('#file').click(function() { 
    $(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
      $("<input/>", {name: 'file[]', type: 'file', id: 'file'}),   
      $("<br/><br/>") 
      )); 
}); 

$('body').on('change', '#file', function(){ 
     if (this.files && this.files[0]) { 
      abc += 1; //increementing global variable by 1 

      var z = abc - 1; 
      var x = $(this).parent().find('#previewimg' + z).remove(); 
      $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>"); 

      var reader = new FileReader(); 
      reader.onload = imageIsLoaded; 
      reader.readAsDataURL(this.files[0]); 

      $(this).hide(); 
      $("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() { 
      $(this).parent().parent().remove(); 
      })); 
     } 
    }); 

function imageIsLoaded(e) { 
    $('#previewimg' + abc).attr('src', e.target.result); 
}; 

$('#upload').click(function(e) { 
    var name = $(":file").val(); 
    if (!name) 
    { 
     alert("First Image Must Be Selected"); 
     e.preventDefault(); 
    } 
}); 
});

и вот мой FIDDLE нужна ваша помощь, чтобы решить эту проблему.

источник

2014-08-05 vanio178

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Upload images with Jquery</title> 
     <script type="text/javascript" src="jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var storedFiles = [];  
       $('#myfiles').on('change', function() { 
        $('#messages').html(''); 
        var myfiles = document.getElementById('myfiles'); 
        var files = myfiles.files; 
        var i=0; 
        for (i = 0; i<files.length; i++) { 
         var readImg = new FileReader(); 
         var file=files[i]; 
         if(file.type.match('image.*')){ 
          storedFiles.push(file); 
          readImg.onload = (function(file) { 
           return function(e) { 
            $('#uploadedfiles').append('<tr class="imageinfo"><td><img width="80" height="70" src="'+e.target.result+'"/></td><td>'+file.name+'</td><td>'+Math.round((file.size/1024))+'KB</td><td><a href="" class="lnkcancelimage" file="'+file.name+'" title="Cancel"><img src="delete.png" width=34" height="34"/></a></td></tr>'); 
           }; 
          })(file); 
          readImg.readAsDataURL(file); 
         }else{ 
          alert('the file '+file.name+' is not an image<br/>'); 
         } 
        } 
       }); 

       $('#uploadedfiles').on('click','a.lnkcancelimage',function(){ 
        $(this).parent().parent().html(''); 
        var file=$(this).attr('file'); 
        for(var i=0;i<storedFiles.length;i++) { 
         if(storedFiles[i].name == file) { 
          storedFiles.splice(i,1); 
          break; 
         } 
        } 
        return false; 
       }); 

       $('#lnkupload').click(function(){ 
        var data = new FormData(); 
        var i=0; 
        for(i=0; i<storedFiles.length; i++) { 
         data.append('files'+i, storedFiles[i]); 
        } 

        if(i>0){ 
         $.ajax({ 
          url: 'load.php', 
          type: 'POST', 
          contentType: false, 
          data: data, 
          processData: false, 
          cache: false 
         }).done(function(msg) { 
          storedFiles = []; 
          if(msg){ 
           alert(msg); 
          }else{ 
           $('#messages').html('Images uploaded successfully'); 
          } 
         }).fail(function() { 
          alert('error'); 
         }); 
        } 
        return false; 
       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <label><strong>Uploading multiple images</strong></label> 
      <input id="myfiles" type="file" name="myfiles[]" multiple="multiple" /> 
      <a href="" id="lnkupload">Upload</a> 
      <table id="uploadedfiles"> 
       <tr><th>Image</th><th>Name</th><th>Size</th><th>Actions</th></tr> 
      </table> 
     </div> 
    </body> 
</html>

источник

2014-08-05 02:44:37

Demo: http://www.lax-soft.tk/index.php/programacion/php-y-jquery/8-subir-imagenes-a-un-servidor-con-previsualizacion –

Предварительный просмотр нескольких изображений перед загрузкой

ответ

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