Question

我创建了一个多文件上传表单（reference）的一个非常基本的示例，它在桌面上运行得很好，但在移动设备上却不行，至少是我正在测试的。

On Mobile（小米Mi4 [Android版：6.1] - 谷歌浏览器/ Mozilla Firefox）：当我点击选择文件时，我看到这个屏幕：

如果我选择Google相册并选择多个文件，则只会将第一个文件插入到表单中。如果我选择图库（本机）应用程序并选择多个文件，我会在表单上获得正确的数字，但是当我点击上传时，我会得到＆＃34; Aw Snap＆＃34;屏幕：

知道为什么会这样吗？

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

谢谢！

Answer 1

尝试这可能会对您有帮助，这只是使用js

的文件上传的前端部分

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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＆amp;的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])); } ?>

工作截图

基本多文件上传无法在移动设备上运行

2 个答案: