Базовая загрузка нескольких файлов не работает на мобильных устройствах

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

On Mobile (Xiaomi Mi4 [версия Android: 6.1] - Google Chrome/Mozilla Firefox): Когда я нажимаю "Выбрать файлы", я вижу этот экран:

Если выбрать Google Фото и выбрать несколько файлов, в форму будет вставлен только первый файл. Если я выберу приложение "Галерея" (родное) и выберем несколько файлов, я получу правильный номер в форме, но когда я нажимаю "Загрузить", я получаю экран "Aw Snap":

Любая идея, почему это происходит?

Помимо Google Фото и родного приложения, я попробовал 5 различных приложений, последний, Piktures действительно работает!

Скажите, пожалуйста, что это не приложение. Есть ли способ правильно получить файлы?

Код прилагается:

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

Если вы хотите проверить: http://odedta.com/projects/jqueryfileupload/

Спасибо!

Ответ 1

Попробуйте, это может вам помочь, это только передняя часть загрузки файла с помощью 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">

Ответ 2

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

Первый шаг;

Вы должны использовать FileReader для загрузки в браузере как локально

Загрузка нескольких файлов с помощью 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]);
    }
}

Второй шаг

Вы можете установить контент изображения в textarea как данные base64 для каждого файла

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

Третий шаг

Затем вы можете отправить в свой файл php весь файл и сохранить свой контент в качестве изображения

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

Полный код

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

Рабочий скриншот