如何打开文件选择器，以便我可以选择一个文件并上传它？

时间：2013-10-31 10:14:45

标签： file-upload cordova sencha-touch file-browser

我正在使用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）它没有返回正确的文件路径。当alert（）options.fileName显示类似“content：// media / external / images / media / 3746”之类的东西时，我想要的有点像“/ mnt /” SD卡/..../ 777.jpg”。 后来我尝试了phonegap的 window.requestFileSystem（LocalFileSystem.PERSISTENT，0，onFSSuccess，fail）， 它可以找到SD卡上的所有目录和文件，但不能给我一个视图。所以我开始意识到我可能必须自己构建一个文件浏览器，我指的是http://www.raymondcamden.com/index.cfm/2012/3/9/PhoneGaps-File-API
{{{ 3}}和[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>'
        },
    ]
}
});

当然这不是一个好地方，但我还没有好主意。虽然我成功地显示了sdcard内容仍然无法点击任何文件夹，更不用说选择文件了。我发现很难解开这些方法，分开方法通常不起作用。 如果有人有任何建议，我会全力以赴。任何帮助都会得到赞赏！

1 个答案:

答案 0 :(得分：0)

您可以使用sencha扩展程序上传文件： https://market.sencha.com/extensions/file-uploading-component-for-sencha-touch 您可以在此处查看演示：http://mindsaur.com/demo/fileupload/

相关问题
最新问题