File upload 如何打开文件选择器，以便我可以选择并上载文件？

我正在编写sencha项目的文件上载，我想点击sencha面板上的选择文件按钮以显示文件选择对话框，这样我就可以点击文件夹来选择要上载的文件。我最初使用的方法是：

function openFileSelector() {
    var source = navigator.camera.PictureSourceType.PHOTOLIBRARY;
    var destinationType = navigator.camera.DestinationType.FILE_URI; 
    var mediaType = navigator.camera.MediaType.ALLMEDIA;  
    var options={  
        quality : 50,  
        destinationType : destinationType,  
        sourceType : source,  
        mediaType : mediaType,
        allowEdit : true,    
    };  
    navigator.camera.getPicture(uploadFile,uploadBroken,options);  
};
function uploadFile(fileURI) {  
    var options = new FileUploadOptions();  
    options.fileKey = "file"; 
    options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
    fN = options.fileName;
    document.getElementById("process_file").innerHTML = fN;
    options.mimeType = "multipart/form-data"; 
    options.chunkedMode = false;  
    ft = new FileTransfer();  
    var    uploadUrl=encodeURI(Global.proxyPortAndIP+"/tyoa/page/phone/docbase/docUploadFile.jsp");  
    ft.upload(fileURI,uploadUrl,uploadSuccess, uploadFailed, options);
    ft.onprogress = uploadProcessing;
    $('.upload_process_bar,#process_info,#process_file').show();  
} 

然而，这种方法有两个缺点： 1它只适用于少数手机。这意味着在某些手机上，当我点击“选择文件”按钮时，它会给我一个选项列表，这样我就可以选择“文件管理器”选项来选择文件。但在其他一些设备上，它只显示包含图片的文件夹。 2它不会返回正确的文件路径。当提醒options.fileName时，它会显示如下内容content://media/external/images/media/3746，我想要的有点像/mnt/sdcard/…/777.jpg。 后来我尝试了phonegap的window.requestFileSystemLocalFileSystem.PERSISTENT，0，onFSSuccess，fail， 它可以找到SD卡上的所有目录和文件，但不能给我一个视图。所以我开始意识到我可能必须自己构建一个文件浏览器，我参考了[http://ramkulkarni.com/blog/file-chooser-dialog-for-phonegap-application/]对于任何可能的解决方案，我不得不说这些都是很好的帖子，但是我在将index.html中的方法移植到我的项目中时遇到了一些问题。我的选择文件按钮在sencha js文件中，所有相关方法都在upload.js文件中

/**FileTransfer*/  
var ft;  
var fN;  
/** 
 * clear uploading progress,dealing with uploading fail,abort and success 
 */  
function clearProcess() {  
    $('.upload_process_bar,#process_info,#process_file').hide();  
    ft.abort();  
};  

/** 
 * open file selector 
 */  
function openFileSelector() {
alert("file system");
//window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, fail);
//alert("after file system");
var source = navigator.camera.PictureSourceType.PHOTOLIBRARY;  
var destinationType = navigator.camera.DestinationType.FILE_URI;
alert("destinationType: "+destinationType);  
var mediaType = navigator.camera.MediaType.ALLMEDIA;  
var options={  
    quality : 50,  
    destinationType : destinationType,  
    sourceType : source,  
    mediaType : mediaType,
    allowEdit : true,    
};  
navigator.camera.getPicture(uploadFile,uploadBroken,options);  
};  

function onFSSuccess(fileSystem){
alert("fileSystem: "+fileSystem);
var directoryReader = fileSystem.root.createReader();
directoryReader.readEntries(successReader,fail);
};
function successReader(entries){
var s="";
for (var i=0; i<entries.length; i++){

    if(entries[i].isDirectory==true){
        //alert("directory: "+entries[i].fullPath);
        //var directoryReaderIn = entries[i].createReader();
        //directoryReaderIn.readEntries(successReader,fail);
        s += " [D]";
    }
    if(entries[i].isFile==true){
        //alert("file: "+entries[i].name);
        //entries[i].file(uploadFile, fail);
        s += " [F]";
    }
    s+= entries[i].fullPath;
    s += "<br/>";
    //alert(s);
}
s+="<p/>";
logit(s);
};
function fail(e){
alert(e);
};

/** 
 * dealing with uploading broke 
 * @param message 
 */  
function uploadBroken(message){   
clearProcess();  
};  

/** 
 * uploading callback,show the progress 
 */  
function uploadProcessing(progressEvent){  

if (progressEvent.lengthComputable) {  
    //already uploaded  
    var loaded=progressEvent.loaded;  
    //file size  
    var total=progressEvent.total;  
    //calculate the percentage
    var percent=parseInt((loaded/total)*100);  
    //换算成MB  
    loaded=(loaded/1024/1024).toFixed(2);  
    total=(total/1024/1024).toFixed(2);  
    $('#process_info').html(loaded+'M/'+total+'M');  
    $('.upload_current_process').css({'width':percent+'%'});  
}  
};  

/** 
 * upload the file
 */  
function uploadFile(fileURI) {  
var options = new FileUploadOptions();  
options.fileKey = "file"; 
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
fN = options.fileName;
alert(fileURI+"  fileName:"+fN);
document.getElementById("process_file").innerHTML = fN;
options.mimeType = "multipart/form-data"; 
options.chunkedMode = false;  
ft = new FileTransfer();  
var uploadUrl=encodeURI(Global.proxyPortAndIP+"/tyoa/page/phone/docbase/docUploadFile.jsp");  
ft.upload(fileURI,uploadUrl,uploadSuccess, uploadFailed, options);  
//get upload progress
ft.onprogress = uploadProcessing;  
//show the progress bar  
$('.upload_process_bar,#process_info,#process_file').show();  
 }  

/** 
 * callback after successfully uploaded
 * @param
 */  
function uploadSuccess(r) {
if(r.response){
    document.getElementById("process_file").innerHTML = fN;
    alert('Upload success!');  
}else{
    alert('Upload failed!');  
} 
clearProcess();  
}  

/** 
 * callback after upload failed 
 * @param error 
 */  
function uploadFailed(error) {  
alert('Upload failed！');  
clearProcess();  
}  

/** 
 *  
 */  
document.addEventListener("deviceready", function(){  
$(function(){  
     $('#upload_file_link').click(openFileSelector);  
});  
}, false);  

在哪里显示目录和文件对我来说仍然是个问题，我把它们放在面板的div中

Ext.define('tyoa.view.more.docbase.DocAddFile', {
extend: 'Ext.form.Panel',
alias: 'widget.docAddFile',
xtype: 'docAddFile',
requires: ['Ext.form.FieldSet','Ext.ux.Fileup'],
config: {
    fullscreen:true,    
    layout: {  
      type: 'vbox',          
     },  
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'File Detail',
            items: [
                {
                    ui: 'back',
                    text: 'Cyber Disk',
                    align: 'left',
                    action: 'backDocbaseList',                  
                },
            ]
        },
        {
            html:
            '<h1><button><a href="javascript:void(0)" id="upload_file_link" onclick="openFileSelector();" style="text-decoration:none">Choose a file to upload</a></button></h1>'+
            //'<a href="fileindex.html" data-role="button" data-inline="true" id="browseBtn1">Browse</a>'+ 
            '<div id="process_file"></div> '+   
            '<div class="upload_process_bar">'+   
            '<div class="upload_current_process"></div>'+   
            '</div>'+  
            '<div id="process_info"></div>'+

            '<div id="content"></div>'
             //'<div data-role="content">'+
                //'<b><span id="curr_folder"></span></b><br/>'+
                //'<a href="#" data-role="button" data-inline="true" id="new_file_btn" data-theme="b" class="small_btn">New File</a>'+
                //'<a href="#" data-role="button" data-inline="true" id="new_dir_btn" data-theme="b" class="small_btn">New Dir</a>'+

                //'<div id="fileBrowser_entries"></div>'+

                //'<a href="#" id="file_browser_ok" data-role="button" data-rel="back" data-theme="b" data-inline="true" id="file_browser_ok">OK</a>'+       
                //'<a href="#" data-role="button" data-rel="back" data-theme="b" data-inline="true" id="file_browser_cancel">Cancel</a>'+       
            //'</div>'+
            //'<span id="fileMsgSpan"></span>'
        },
    ]
}
});

当然，这不是一个好地方，但我还没有好主意。虽然我成功地显示了SD卡内容，但仍然无法在任何文件夹中点击，更不用说选择文件了。我只是发现很难分解这些方法，分离的方法通常不起作用。

---

如果有人有任何建议，我洗耳恭听。任何帮助都将被告知

您可以使用sencha扩展名上载文件：

---

您可以在此处看到演示：

谢谢您的回复，但我认为这是我以前使用过的一款，在手机上无法使用。我使用的是st 2.0，但是，我认为原因是该组件找不到手机的SD卡目录。