Le téléchargement de base de plusieurs fichiers ne fonctionne pas sur le mobile

Question

J'ai créé un exemple très basique de formulaire de téléchargement de fichiers multiples ( référence ), il fonctionne parfaitement sur le bureau mais pas sur les mobiles, du moins ceux que je teste.

Sur mobile (Xiaomi Mi4 [Android version : 6.1] - Google Chrome/Mozilla Firefox) : Lorsque je clique sur Choisir les fichiers, je vois cet écran :

Si je choisis Google Photos et sélectionne plusieurs fichiers, seul le premier fichier sera inséré dans le formulaire. Si je sélectionne l'application Gallery (native) et que je sélectionne plusieurs fichiers, j'obtiens le nombre correct de fichiers dans le formulaire, mais lorsque je clique sur le bouton de téléchargement, j'obtiens l'écran "Aw Snap" :

Une idée de la raison pour laquelle cela se produit ?

En plus de Google Photos et de l'application native, j'ai essayé 5 applications différentes, la dernière, Piktures a effectivement fonctionné !

Dites-moi que ce n'est pas un problème d'application... Y a-t-il un moyen d'obtenir les fichiers correctement ?

Code joint :

<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
            }
        }
    ?>

Si vous souhaitez tester : http://odedta.com/projects/jqueryfileupload/

Merci !

Answer 1

Essayez ceci, cela pourrait vous aider, c'est seulement la partie frontale du téléchargement de fichiers avec des 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

Je ne suis pas sûr que les navigateurs mobiles supportent exactement cela. multiple attribut J'ai lu certains articles, il n'est pas de soutien ou n'est pas standart, de toute façon Si vous voulez afficher plusieurs images ; Vous pouvez voir le code complet ci-dessous

Première étape ;

Vous devez utiliser FileReader pour le chargement sur le navigateur comme localement

Chargement de plusieurs fichiers avec 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]);
    }
}

Deuxième étape

Vous pouvez définir le contenu de l'image dans la zone de texte en tant que données base64 pour chaque fichier.

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;
    //...
}

Troisième étape

Ensuite, vous pouvez envoyer à votre fichier php toutes les données et enregistrer votre contenu en tant qu'image.

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]));
}

Code complet

HTML et 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]));
}
?>

Capture d'écran de travail