输入文件上传多个文件在移动设备上不起作用答案

【问题标题】：Input file upload multiple files not working on Mobile device输入文件上传多个文件在移动设备上不起作用
【发布时间】：2015-04-29 15:06:12
【问题描述】：

我有一个通用的文件上传器，如下所示：

<span class="input-group-btn">
    <span class="btn btn-default btn-fill btn-file">
        Browse<input type="file" id="fileInputs" multiple accept="image/*" onclick="resetprogresss()">
    </span>
</span>

我可以用我的桌面上传多个文件没有问题，但是当我尝试在移动设备上使用相同的功能时，我似乎无法选择多个文件。

这里是javascript：

var Filenames;

function generateUUID() {
    var d = new Date().getTime();
    var uuid = 'xxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
};

var MainPath = generateUUID();
var Names = [];

function UploadFiles() {
    var SetDir = MainPath;
    var fileInputs = document.getElementById("fileInputs");
    if ('files' in fileInputs) {
        if (fileInputs.files.length == 0) {
            alert("Please select a file");
            return;
        } else {
            var file = fileInputs.files[0];
            var ar = $("#AutoResumeBoxs").is(":checked");
            var chunksize = 20000;
            var name = SetDir;

            /*
            Arguments:
                username            name used to create subfolders on the server.
                files               files object from the file input tag.
                uploadStartFunction function that receives a file object just before uploading.
                progressFunction    function that accepts a percent-complete integer value.
                doneFunction        function called when file is uploaded.
                errorFunction       function called when an error occurs.
                chunkSize           size in bytes of each chunk uploaded.
                autoResume          bool to control auto resuming.
            */
            CFUpload(name, fileInputs.files, uploadStarts, progresss, dones, errors, chunksize, ar);
        }
    }
}

function uploadStarts(thisfile) {
    Names.push(thisfile.name);


}

function progresss(percent) {

    var p = percent + "%";
    $("#lblUPs").text(p);
    $("#progressbars").width(p);
    $("#progressbars").attr("data-appear-progress-animation", p);
    $("#ProgressTabs").text(p);
}

function resetprogresss() {
    progresss(0);
}

function dones() {


}

function errors(data) {

}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1) {
        c_value = null;
    }
    else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
    }
    return c_value;
}

$(document).ready(function () {
    $("#urls").hide();
    document.getElementById("saveme").disabled = true;

    var username = getCookie("username");
});

我使用这个library 来上传文件。任何建议将不胜感激。

【问题讨论】：

我可以使用 ctrl 选择多个文件，您打算如何在移动设备上执行此操作？
@ProllyGeek 我不确定这是我想要找出的。我想从手机中选择多个文件，有了这个，我已经创建了 Web-API 方法，jQuery 上传到 Web-API，但是我无法从我的手机图库中选择多个文件用于上传。
@Jacquer Bronkhorst 当我尝试您的代码fiddle.jshell.net/prollygeek/n3Lvjo81 时，我只能选择按 ctrl + 多个文件的文件！还有其他我不知道的行为吗？
@ProllyGeek 是的，请使用您的移动设备访问该 URL。并尝试上传多个文件
没有 js 解决方案会改变实际选择多个文件的方式；它们都依赖于原生的行为。考虑到这一点，我会尽量让这个过程尽可能直观，即使“高级用户”需要额外点击几下。

标签： javascript file-upload

【解决方案1】：

这取决于您在手机上选择的选择方法，但是，我的原生图库和文件管理器在我的手机上绝对可以正常工作，只需点击并按住您要上传的文件，它就会切换到多选模式：

请注意，有很多 jQuery 插件可以上传 this one 之类的文件，因此不必使用纯 html 输入标签。

【讨论】：