webAppIOS如何实现多附件上传功能
app中经常需要实现上传附件的功能,webApp在android中可以通过inputfile调取文件。】
ios存在沙盒机制,无法通过inputfile 获取文件路径。可以通过原生ios将第三方应用的文件导入到
douments或者downloads文件夹下面,通过mui的文件访问方式访问。
实现效果:
实现代码:
<script type="text/javascript">
var dir="",root=[],current=null,parent=null,pitem=null,list=null;
var qqdir="file:///storage/emulated/0/tencent/QQfile_recv";
var iosqqdir="file:///var/mobile";
var htmlItem='<img class="ficon"></img><div><span class="fname"></span><br/><span class="finf">...</span></div>';
var iosqq="Document/MY/File";
var self,opener;
var primaryBack;
document.addEventListener( "plusready", function () {
var path=plus.io.convertLocalFileSystemURL(iosqq);
// alert(path.substring(0, path.lastIndexOf("/Documents"))+"/Documents");
plus.io.requestFileSystem( path.substring(0, path.lastIndexOf("/Library")), function( fs ) {
// alert(fs.root);
// console
//alert(fs.root.fullPath);
console.log(fs.root.fullPath);
// console(JSON.stringify(fs.root));
// 可通过fs操作PUBLIC_DOCUMENTS文件系统
// ......
}, function ( e ) {
// alert( "Request file system failed: " + e.message );
} );
pitem = document.getElementById("pdir");
list = document.getElementById("dcontent");
// Get root item information
var items = list.querySelectorAll(".fitemroot");
for ( var i = 1; i < items.length; i++ ) {
updateRootItem( items[i] );
}
// var item;
// updateRootItem(item);
}, false );
// Update root information with item(HTMLUIElement)
function updateRootItem( item ) {
var path=plus.io.convertLocalFileSystemURL("_documents");
plus.io.resolveLocalFileSystemURL("file://"+path.substring(0, path.lastIndexOf("/Library"))+"/Library", function ( entry ) {
var filename= entry.toLocalURL();
filename=filename.substring(0,filename.length-1);
var filename= filename.substring(filename.lastIndexOf("/") + 1).toLowerCase();
document.querySelector("#fname").innerText = filename;
root.push( entry );
item.entry = entry;
updateInf( item, entry );
}, function ( e ) {
outLine( "Update "+item.id+" information failed: "+e.message );
alert( "Update "+item.id+" information failed: "+e.message);
} );
}
// Update HTMLUIElement information with entry object
function updateInf( item, entry ) {
entry.getMetadata( function ( metadata ) {
var inf = item.querySelector(".finf");
if ( entry.isDirectory ) {
inf.innerText = "文件夹:"+metadata.directoryCount+"项,文件:"+metadata.fileCount+"项";
} else {
inf.innerText = dateToStr(metadata.modificationTime);
}
}, function ( e ) {
outLine( "Get metadata "+entry.name+" failed: "+e.message );
}, false );
}
// Update ui with entries
function updateList( entries ) {
var i,items = [].slice.apply(list.querySelectorAll(".fitem"));
items.shift();
// sort the entries
entries.sort( sortCompareEntry )
// Update item to ui
for ( i = 0; i < entries.length; i++ ) {
var di = null;
if ( i < items.length ) {
di=items[i];
di.style.display = "block";
} else {
di = document.createElement("div");
di.className = "fitem";
di.setAttribute( "onclick", "openDir(this);" );
di.innerHTML = htmlItem;
list.appendChild( di );
}
di.entry = entries[i];
di.id = di.entry.name;
// if(di.id=="IFile"){
// return;
// }
di.querySelector(".fname").innerText = di.id;
di.querySelector(".finf").innerText = "";
if ( entries === root ) {
di.querySelector(".ficon").src = "../images/fdisk.png";
} else {
di.querySelector(".ficon").src = di.entry.isDirectory?"../images/fdir.png":"../images/ffile.png";
}
updateInf( di, di.entry );
}
// Hide other items
for ( ; i < items.length; i++ ) {
items[i].style.display = "none";
items[i].entry = null;
}
// Reset scroll offset
list.scrollTop = 0;
}
// Open directory with item(HTMLUIElement)
function openDir( item ) {
var entry = item.entry;
if ( !entry ) {
outSet( "Open directory \""+item.id+"\" with null!" );
return;
}
if ( entry.isDirectory ) {
outSet( "Open directory: \""+dir+item.id+"\"" );
var dirReader = entry.createReader();
dirReader.readEntries( function( entries ) {
parent = current;
current = item.entry;
dir = entry.toURL()+"/";
// Dispaly up to parent item
pitem.style.display = "block";
// Update ui
updateList( entries );
}, function ( e ) {
outLine( "Read directory "+item.id+" failed: "+e.message );
} );
} else {
plus.io.resolveLocalFileSystemURL(dir+item.id, function ( entry ) {
root.push( entry );
item.entry = entry;
updateInf( item, entry );
localStorage.setItem("selectfile",entry.toLocalURL());
$("#form").show();
$("#filebackfile").hide();
$("#filebackform").show();
$("#dcontent").hide();
// console.log(e.detail.fileurl);
var fileurl=entry.toLocalURL();
filename = fileurl.substring(fileurl.lastIndexOf("/") + 1).toLowerCase();
var fileIndex = fileData.length;
//附件名显示
htm = '';
htm += '<a class="filebox" style="margin-left: 10px;display:inline-block;height: auto;word-break:break-all;">' + filename +
'<img class="channelfile" data-fileIndex="' + fileIndex + '" src="../images/filedelete.png" style="display: inline-block;margin-left: 20px;width: 15px;height: 15px;" />' +
'</a>';
$("#filesList").append(htm);
$(".channelfile").unbind();
$(".channelfile").on("click", function() {
// alert($(this).attr("data-imgIndex"));
$(this).parent('.filebox').remove();
fileData.splice($(this).attr("data-fileIndex"), 1);
//重置图片下标
$(".channelfile").each(function(index, item) {
$(this).attr("data-fileIndex", index);
});
});
plus.io.resolveLocalFileSystemURL(fileurl, function(entry){
entry.file(function(file){
var reader = new plus.io.FileReader();
reader.onloadend = function (e) {
console.log(e.target.result);
// alert(e.target.result);
var dataURL=e.target.result;
dataURL = dataURL.split(",")[1];
// alert(dataURL);
dataURL = window.atob(dataURL);
var ia = new Uint8Array(dataURL.length);
for(var i = 0; i < dataURL.length; i++) {
ia[i] = dataURL.charCodeAt(i);
};
// var fileName="dfgdff.amr";
var fileName = entry.toLocalURL().substring(entry.toLocalURL().lastIndexOf("/") + 1).toLowerCase();
fileData.push(new Blob([ia], {
type: fileName
}, 0.8));
// alert(fileData.length);
};
console.log(reader.readAsDataURL(file));
},function(e){
mui.toast("读写出现异常: " + e.message );
})
})
}, function ( e ) {
outLine( "Update "+item.id+" information failed: "+e.message );
alert( "Update "+item.id+" information failed: "+e.message);
});
}
}
// Back to parent directory
function parentDir() {
outSet( "Go to previous directory: \""+dir+"\"");
var p = dir.lastIndexOf( "/", dir.length-2 );
if ( p < 0 || !parent ) { // Up to root
dir = "";
current = parent = null;
// hide up to parent item
pitem.style.display = "none";
// Update ui
updateList( root );
} else {
var dirReader = parent.createReader();
dirReader.readEntries( function( entries ) {
dir = dir.substr( 0, p+1 );
outLine( "Current directory: \""+dir+"\"" );
current = parent;
current.getParent( function ( entry ) {
parent = entry;
}, function ( e ) {
outLine( "Get \""+current.name+"\" parent directory failed: "+e.message );
} );
parent = null;
// Update ui
updateList( entries );
}, function ( e ) {
outLine( "Read directory "+item.id+" failed: "+e.message );
} );
}
}
// Entry sort compare
function sortCompareEntry( a, b ) {
if ( a.isDirectory && b.isFile ) {
return -1;
} else if ( a.isFile && b.isDirectory ) {
return 1;
} else {
return a.name - b.name;
}
}
// Format data to string
function dateToStr( datetime ) {
var year = datetime.getFullYear(),
month = datetime.getMonth()+1,
date = datetime.getDate(),
hour = datetime.getHours(),
minutes = datetime.getMinutes(),
second = datetime.getSeconds();
if ( month < 10 ) {
month = "0" + month;
}
if ( date < 10 ) {
date = "0" + date;
}
if ( hour < 10 ) {
hour = "0" + hour;
}
if ( minutes < 10 ) {
minutes = "0" + minutes;
}
if ( second < 10 ) {
second = "0" + second;
}
return (year+"-"+month+"-"+date+" "+hour+":"+minutes+":"+second);
}
</script>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
.fitem {
width: 96%;
overflow: hidden;
padding: 10px 2%;
border-bottom: 1px solid #c6c6c6;
text-align: left;
}
.fitem:active {
background: #f4f4f4;
}
.ficon {
height: 40px;
float: left;
margin-right: 8px;
}
.fup {
line-height:40px;
}
.fname {
font-weight: bolder;
height: 22px;
font-size: 16px;
}
.finf {
width: 100px;
height: auto;
font-size: 12px;
}
</style>