我正在处理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/ sdcard/..../777.jpg”。后来我尝试了phonegap的window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, fail)，它可以找到sdcard上的所有目录和文件，但不能给我一个视图。所以我开始意识到我可能要建立我自己的文件浏览器，http://www.raymondcamden.com/index.cfm/2012/3/9/PhoneGaps-File-API
http://www.digitalnoiz.com/mobile-development/mobile-file-explorer-with-phonegapcordova-and -jquery-mobile-part-1/
和 [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内容仍然无法在任何文件夹中点击，更不用说选择文件了。我发现这些方法很难分解，通常是分开的方法功能失效。如果有人有任何建议，我会全力以赴。任何帮助将不胜感激！