Podstawowe przesyłanie wielu plików nie działa na urządzeniach mobilnych

Question

Stworzyłem bardzo prosty przykład formularza przesyłania wielu plików (reference), działa on idealnie na komputerach stacjonarnych, ale nie na urządzeniach mobilnych, przynajmniej tych, z którymi testuję.

Na Mobile (Xiaomi MI4 [Android w wersji 6.1] - Google Chrome/Mozilla Firefox): Po kliknięciu na Wybierz pliki widzę taki ekran:

Jeśli wybiorę Zdjęcia Google i wybierz wielokrotność pliki, tylko pierwszy plik zostanie wstawiony do formularza. Jeśli wybiorę galerii (native) aplikację i wybrać wiele plików uzyskać prawidłowy numer w formularzu, ale gdy klikam wysyłania pojawia się ekran „Kurza twarz”:

Każdy pomysł dlaczego tak jest wydarzenie?

Oprócz Zdjęć Google i natywnej aplikacji próbowałem 5 różnych aplikacji, ostatni, Piktures faktycznie zadziałał!

Proszę mi powiedzieć, że to nie jest aplikacja ... czy istnieje sposób na poprawne pobranie plików?

kod dołączony:

<form method="post" enctype="multipart/form-data"> 
     <input type="file" name="my_file[]" multiple> 
     <input type="submit" value="Upload"> 
    </form> 
    <?php 
     if (isset($_FILES['my_file'])) { 
      $myFile = $_FILES['my_file']; 
      $fileCount = count($myFile["name"]); 

      for ($i = 0; $i < $fileCount; $i++) { 
       ?> 
        <p>File #<?= $i+1 ?>:</p> 
        <p> 
         Name: <?= $myFile["name"][$i] ?><br> 
         Temporary file: <?= $myFile["tmp_name"][$i] ?><br> 
         Type: <?= $myFile["type"][$i] ?><br> 
         Size: <?= $myFile["size"][$i] ?><br> 
         Error: <?= $myFile["error"][$i] ?><br> 
        </p> 
       <?php 
      } 
     } 
    ?> 

Jeśli chcesz testu: http://odedta.com/projects/jqueryfileupload/

Dzięki!

Answer 1

Spróbuj to może pomóc to tylko przedni zakończyć część przesłania pliku z js

window.onload = function() { 
 
    if (window.File && window.FileList && window.FileReader) { 
 
    var filesInput = document.getElementById("uploadImage"); 
 
    filesInput.addEventListener("change", function(event) { 
 
     var files = event.target.files; 
 
     var output = document.getElementById("result"); 
 
     for (var i = 0; i < files.length; i++) { 
 
     var file = files[i]; 
 
     if (!file.type.match('image')) 
 
      continue; 
 
     var picReader = new FileReader(); 
 
     picReader.addEventListener("load", function(event) { 
 
      var picFile = event.target; 
 
      var div = document.createElement("div"); 
 
      div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + 
 
      "title='" + picFile.name + "'/>"; 
 
      output.insertBefore(div, null); 
 
     });   
 
     picReader.readAsDataURL(file); 
 
     } 
 

 
    }); 
 
    } 
 
}

<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/> 
 
<div id="result" class="uploadPreview">

Answer 2

nie jestem pewien dokładnie o tym przeglądarek mobilnych też wsparcie atrybut multiple czytałem jakiś artykuł to nie jest wsparcie lub nie jest standardowe, w żaden sposób Jeśli chcesz opublikować wiele obrazów; Pełny kod można zobaczyć poniżej:

Pierwszy krok;

Należy użyć FileReader dla obciążenia w przeglądarce jako lokalnie

wielokrotnego ładowania plików z FileReader

document.getElementById("filesToUpload").onchange = function() { 
    var fileIndex = 0; 
    for (var x= 0; x < input.files.length; x++) { 
     //add to list 
     var li = document.createElement('li'); 
     //Filename listing 
     li.setAttribute('id','li_'+x); 
     li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
     list.append(li); 
     //FileReader create and set onload event 
     var reader = new FileReader(); 
     reader.onload = function (data) { 
      data.target.result; 
     } 
     //Read file 
     reader.readAsDataURL(input.files[x]); 
    } 
} 

drugim etapie

Można ustawić zawartość obrazu do textarea jako dane Base64 dla każdego pliku

reader.onload = function (data) { 
    //.... 
    //Split base64 data from DataURL (// "data:image/png;base64,.....) 
    var b64 = data.target.result.split(',')[1]; 
    var b64Input = document.createElement('textarea'); 
    b64Input.setAttribute('name','file64[]'); 
    b64Input.value = b64; 
    //... 
} 

Trzeci Ste p

Następnie można wysłać do pliku php całego danych i zapisać zawartość jako obraz

for($i = 0; $i<count($_POST["fileName"]);$i++){ 
    echo $_POST["fileName"][$i]."<br>"; 
    //decode base64 content and put file 
    file_put_contents($_POST["fileName"][$i], base64_decode($_POST["file64"][$i])); 
} 

pełny kod

HTML & kodu JavaScript

<input name="filesToUpload[]" id="filesToUpload" type="file" multiple /> 
<form method="post" action="multipleFileUpload.php" enctype="multipart/form-data" id="formMultipleFileUpload"> 
<ul id="fileList"> 

</ul> 
<input type="submit" value="Upload" id="btnUpload"> 
</form> 
<script type="text/javascript"> 
var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 
document.getElementById("filesToUpload").onchange = function() { 
    var fileIndex = 0; 
    for (var x= 0; x < input.files.length; x++) { 
     //add to list 
     var li = document.createElement('li'); 
     li.setAttribute('id','li_'+x); 
     li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
     list.append(li); 
     var reader = new FileReader(); 
     reader.onload = function (data) { 
      var li = document.getElementById('li_'+fileIndex); 
      var previewImg = document.createElement('img'); 
      previewImg.setAttribute('width','50'); 
      previewImg.setAttribute('height','50'); 
      li.append(previewImg); 
      previewImg.src = data.target.result; 
      var b64 = data.target.result.split(',')[1]; 
      var b64Input = document.createElement('textarea'); 
      b64Input.setAttribute('name','file64[]'); 
      b64Input.value = b64; 
      li.append(b64Input); 
      var fileName = document.createElement('input'); 
      fileName.setAttribute('name','fileName[]'); 
      fileName.value = input.files[fileIndex].name; 
      li.append(fileName); 
      fileIndex++; 
     } 
     reader.readAsDataURL(input.files[x]); 
    } 
} 

PHP (multipleFileUpload.php)

<?php 
for($i = 0; $i<count($_POST["fileName"]);$i++){ 
    echo $_POST["fileName"][$i]."<br>"; 
    file_put_contents($_POST["fileName"][$i], base64_decode($_POST["file64"][$i])); 
} 
?> 

screenshot Praca