0
我正在上傳sencha項目的文件上傳文件，我想點擊sencha面板上的「Select file」按鈕來顯示一個文件選擇對話框，這樣我就可以點擊一個文件夾來選擇要上傳的文件。我一開始使用這個方法：如何打開文件選擇器，以便我可以選擇文件並上傳它？
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）它僅適用於好幾個cellphones.That意味着一些智能手機時，我點擊「選擇文件」按鈕，它可以給我一個選項列表，所以我可以選擇「文件管理器」選項來選擇文件。但在其他一些設備上，它只顯示包含圖片的文件夾。
2）它不返回正確的文件路徑。當alert（）options.fileName顯示「content：// media/external/images/media/3746」之類的東西時，我想要的有點像「/ MNT/SD卡/..../ 777.jpg」。 後來我嘗試phonegap的 window.requestFileSystem（LocalFileSystem.PERSISTENT，0，onFSSuccess，失敗）, 它可以找到SD卡上的所有目錄和文件，但不能給我一個視圖。所以我開始意識到我可能必須自己建立一個文件瀏覽器，我提到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中的方法移植到我的項目中遇到了一些問題。
我的「選擇文件」按鈕是在煎茶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>'
},
]
}
});
當然，這不是一個好地方，但我沒有好主意yet.Although我成功地顯示在SD卡的內容依然任何文件夾中無法觸碰，更別說選擇file.I只要找到很難分開這些方法，分離的方法通常不起作用。 如果任何人有任何建議，我全部耳朵。任何幫助將明確！
感謝您的回覆，但我覺得這是我exectly之前使用的一個，它不能在移動設備上運行phone.I'm使用ST 2.0，但是，我認爲原因是這個組件找不到手機的SD卡目錄。 – StarLeo