基本的多文件上传在移动设备上不起作用 [英] Basic multiple file upload not working on mobile

问题描述

我创建了一个非常基本的多文件上传表单示例(参考)，它可以完美地在台式机，但不支持移动设备，至少是我正在测试的设备.

I created a very basic example of a multiple file upload form (reference), it works perfect on desktop but not on mobile, at least the ones I am testing with.

在移动设备上(小米Mi4 [Android版本:6.1]-Google Chrome/Mozilla Firefox):单击选择文件"时，我看到以下屏幕:

On Mobile (Xiaomi Mi4 [Android version: 6.1] - Google Chrome/Mozilla Firefox): When I click on Choose files I see this screen:

如果我选择Google相册并选择多个文件，则只会将第一个文件插入表单. 如果我选择图库"(本机)应用程序并选择多个文件，则在表单上会得到正确的编号，但是当我单击上载"时，会出现"Aw Snap"屏幕:

If I choose Google Photos and select multiple files, only the first file will be inserted into the form. If I select the Gallery (native) app and select multiple files I get the correct number on the form but when I click upload I get the "Aw Snap" screen:

知道为什么会这样吗?

除了Google相册和本机应用程序外，我还尝试了5种不同的应用程序，最后一个是

Besides Google Photos and the native app I tried 5 different apps, the last one, Piktures actually worked!

请告诉我这不是应用程序……有没有办法正确获取文件?

Please tell me this is not an app thing... is there a way to get the files correctly?

附加代码:

<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/

谢谢！

推荐答案

尝试一下可能会帮助您，这只是使用js上传文件的前端部分

Try this might help you this is only front end part of file upload with 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">

这篇关于基本的多文件上传在移动设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！