输入类型=“文件”不适用于 phonegap

Question

我必须在我的 phonegap 项目中实现文件上传功能。用户应该能够从手机内存或 SD 卡上传任何类型的文件。我使用 jQuery Mobile 框架设计的应用程序屏幕。我使用下面的代码来调用文件浏览器并选择文件。

<input type="file" />

当我运行应用程序时，它会显示“选择文件”按钮。但是当我点击这个按钮时没有任何反应。我在不同的 android 设备上对其进行了测试，但面临同样的问题。 LogCat 窗口未显示任何错误或警告消息。移动浏览器是否支持输入类型=“文件”？有没有其他方法可以实现相同的？

Answer 1

输入文件确实适用于 phonegap，但在某些 android 版本 (4.4-4.4.2) 上存在错误 HTML file input in android webview (android 4.4, kitkat)

对于安卓你可以使用这个插件：https://github.com/cdibened/filechooser

Answer 2

您需要在项目或主文件（调用文件选择器）中包含 JQuery、JQuery Mobile 和 PhoneGap 的必要文件。然后在调用页面创建一个按钮来启动浏览器。

<a href="fileBrowser.html" id="browseBtn" data-role="button"
   data-inline="true">Browse</a>

然后在显示之前为文件选择器设置参数。您可以通过处理“browseBtn”的点击事件来做到这一点

    var currPath = "";
    var currEntry = null;

    if (typeof file_Browser_params == 'undefined')
        file_Browser_params = new Object();

    if (typeof file_Browser_params.directory_browser != 'boolean')
        file_Browser_params.directory_browser = false;

    if (typeof file_Browser_params.on_folder_select != 'function')
        file_Browser_params.on_folder_select = null;

    if (typeof file_Browser_params.on_file_select != 'function')
        file_Browser_params.on_file_select = null;

    if (typeof file_Browser_params.on_ok != 'function')
        file_Browser_params.on_ok = null;

    if (typeof file_Browser_params.new_file_btn == 'undefined')
        file_Browser_params.new_file_btn = true;

    if (typeof file_Browser_params.new_folder_btn == 'undefined')
        file_Browser_params.new_folder_btn = true;

    function init()
    {
        if (!file_Browser_params.new_file_btn)
            $("#new_file_btn").hide();

        if (!file_Browser_params.new_folder_btn)
            $("#new_dir_btn").hide();

        $("#new_file_btn").click(function(){
            if (currEntry == null)
                return;
            var fileName = prompt("Enter File Name","untitled.txt");
            if (fileName == null || fileName == '')
                return;
            currEntry.getFile(fileName,{create:false},function(){
                alert("File already exists");
            }, 
            function(){
                currEntry.getFile(fileName,{create:true}, function(){
                    //refresh current folder
                    getEntries(currEntry);
                }, function(){
                    alert("Error creating file " + fileName);
                });
            });
        });

        $("#new_dir_btn").click(function(){
            if (currEntry == null)
                return;
            var fileName = prompt("Enter Folder Name","untitled");
            if (fileName == null || fileName == '')
                return;
            currEntry.getDirectory(fileName,{create:false},function(){
                alert("Folder already exists");
            }, 
            function(){
                currEntry.getDirectory(fileName,{create:true}, function(){
                    //refresh current folder
                    getEntries(currEntry);
                }, function(){
                    alert("Error creating file " + fileName);
                });
            });
        });

        $("#file_browser_ok").click(function(){
            if (file_Browser_params.on_ok == null)
                return;
            file_Browser_params.on_ok(currEntry);
        });         

        if (typeof file_Browser_params.initial_folder == 'undefined' ||
            file_Browser_params.initial_folder == null)
        {
            file_Browser_params.initial_folder = null;
            getRootAndDisplay();
        } 
        else
        {
            getEntries(file_Browser_params.initial_folder);
        }
    }

    function getRootAndDisplay()
    {
        getRoot(function(dirEntry){
            try {
                getEntries(dirEntry);
            } catch (err)
            {
                alertError(err);
            }
        });
    }

    function getRoot(onGetRoot)
    {       
        if (typeof window.requestFileSystem != 'undefined') {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
                if (typeof onGetRoot != 'undefined')
                    onGetRoot(fileSystem.root);
            }, function(){
                log("Error accessing local file system");
            });
        }

        return null;
    }

    function upOneLevel()
    {
        if (currEntry == null)
            return;
        currEntry.getParent(function(parentArg){
            getEntries(parentArg);
        }, function(error){
            alert("Error getting parent folder");
        })
    }

    function getEntries(dirEntry)
    {
        if (dirEntry == null)
            return;

        currPath = dirEntry.fullPath;
        currEntry = dirEntry;
        $("#curr_folder").html(currPath);
        var dirReader = dirEntry.createReader();
        dirReader.readEntries(function(entries){
            displayEntries(entries);            
        }, function(err){
            if (typeof err.message != 'undefined')
                err = err.message;
            alert(err); 
        });
    }

    function displayEntries(entriesArray)
    {
        entriesArray.sort(function(a,b){
            var str1 = a.name.toLowerCase();
            var str2 = b.name.toLowerCase();
            if (str1 < str2)
                return -1;
            if (str1 > str2)
                return 1;
            return 0;
        });             

        $("#fileBrowser_entries").empty();
        var table = $("<table id='file_entry_table'></table>").appendTo("#fileBrowser_entries");

        var row = $("<tr class='file_list_row'><td class='file_icon'>D</td><td>..</td></tr>").appendTo(table);
        $(row).click(function(event){
            upOneLevel();
        });

        for (var i in entriesArray)
        {
            var isFolder = entriesArray[i].isDirectory;
            var name = entriesArray[i].name;

            if (file_Browser_params.directory_browser && !isFolder)
                continue;

            var row = $("<tr class='file_list_row'></tr>").appendTo(table);
            $(row).data("entry", entriesArray[i]);
            $("<td class='file_icon'>" + (isFolder ? 'D' : 'F') + "</td>").appendTo(row);
            $("<td class='file_name'>" + name + "</td>").appendTo(row);
            $(row).click(function(event){
                var entryData = $(this).data("entry");
                if (entryData.isDirectory) {
                    if (file_Browser_params.on_folder_select != null)
                    {
                        var ret = file_Browser_params.on_folder_select(entryData);
                        if (ret == false) {
                            $('.ui-dialog').dialog('close');
                            return;
                        }
                    }
                    getEntries(entryData);
                } else if (file_Browser_params.on_file_select != null)
                {
                    var ret = file_Browser_params.on_file_select(entryData);
                    if (ret == false) {
                        $('.ui-dialog').dialog('close');
                        return;
                    }
                }
            });
        }
    }

    function alertError(err){
        if (typeof err.message != 'undefined')
            err = err.message;
        alert(err);
    }

    init();