что с этим кодом? почему он не сортирует предварительный просмотр изображения?

Вот полный код для html5 файла множественной загрузки с съемным и предварительного изображениемчто с этим кодом? почему он не сортирует предварительный просмотр изображения?

, но я не знаю, почему это function handleFileSelect(e) показать предварительные просмотр изображения с неправильной сортировкой, когда выбирают более 2 файлов? (Хотя, это загрузить в мою папку правильно сортировать, но я все еще хочу, чтобы показать предварительный просмотр с правильной сортировкой)

<!doctype html> 
<html> 
<head> 
<title>Proper Title</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<style> 
    #selectedFiles img { 
     max-width: 200px; 
     max-height: 200px; 
     float: left; 
     margin-bottom:10px; 
    } 
    .delete_img{ 
     cursor:pointer; 
     color:red; 
     font-size:14px; 
     margin-left:10px; 
    } 
</style> 
</head> 

<body> 

    <form id="myForm" method="post"> 

     Username: <input type="text" name="username" id="username"><br/> 
     Email: <input type="text" name="email" id="email"><br/> 
     Multiple Files: <input type="file" id="files" name="files[]" multiple><br/> 

     <div id="selectedFiles"></div> 

     <input type="submit"> 
    </form> 



    <script> 
    var selDiv = ""; 
    var storedFiles = []; 

    $(document).ready(function() { 
     $("#files").on("change", handleFileSelect); 

     selDiv = $("#selectedFiles"); 
     $("#myForm").on("submit", handleForm); 

     $("body").on("click", ".delete_img", removeFile); 
    }); 

    function handleFileSelect(e) { 
     var files = e.target.files; 
     var filesArr = Array.prototype.slice.call(files); 
     filesArr.forEach(function(f) {   

      if(!f.type.match("image.*")) { 
       return; 
      } 
      storedFiles.push(f); 

      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'> <span class='delete_img'> DEL </span><br>" + f.name + "<br clear=\"left\"/></div>"; 
       selDiv.append(html); 

      } 
      reader.readAsDataURL(f); 
     }); 

    } 

    function handleForm(e) { 
     e.preventDefault(); 
     var username = document.getElementById('username').value; //get value จาก form input 
     var email = document.getElementById('email').value; 


     var data = new FormData(); 

     data.append('username', username); //มาใส่ในajax object formdata เพื่อเตรียมส่งเข้าฝั่งserver 
     data.append('email', email); 

     for(var i=0, len=storedFiles.length; i<len; i++) { 
      data.append('files[]', storedFiles[i]); //อย่าลืม [] 
     } 

     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', 'upload.php', true); 

     xhr.onload = function(e) { 
      if(this.status == 200) { 
       console.log(e.currentTarget.responseText); 
       //alert(e.currentTarget.responseText + ' items uploaded.'); 
       window.location = "http://www.google.com"; 
      } 
     } 

     xhr.send(data); 
    } 

    function removeFile(e) { 
     var img = e.target.parentElement.querySelector("img") 
     var file = img.getAttribute('data-file'); 
     for(var i=0;i<storedFiles.length;i++) { 
      if(storedFiles[i].name === file) { 
       storedFiles.splice(i,1); 
       break; 
      } 
     } 
     $(this).parent().remove(); 
    } 
    </script> 

</body> 
</html>

источник

2017-01-08 doflamingo

Может быть, общий размер загрузки ваших файлов преодолевает max_upload_limit.Usually на 2 MB.As я проверил код в liveweave У меня нет проблемы (5 изображений). Проверьте общий размер ваших файлов. Сколько это стоит?

источник

2017-01-08 07:40:06 liontass

Вы уже пробовали выбрать 6 изображений? – doflamingo

Да, и он отлично работает – liontass

, но это не размер загрузки, потому что это просто изображение предварительного просмотра (перед загрузкой) – doflamingo

что с этим кодом? почему он не сортирует предварительный просмотр изображения?

ответ

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