[分享]利用WEX5做的一个下载文件功能的实例

biyaooo · 发表于 2016-3-15 17:35:19

本帖最后由 biyaooo 于 2016-3-15 17:49 编辑

感谢sxl 南京-木予梅州--流给予的帮助。此实例只是简单的实现功能，和新手一起学习进步，后面更多的功能还需要大家多多完善。

JS加入了cordova插件引入，新手需要注意，测试的时候需要真机测试。

Screenshot_2016-03-15-17-14-36_biyao.test.cn.png

Screenshot_2016-03-15-17-14-36_biyao.test.cn.png

Screenshot_2016-03-15-17-14-44_biyao.test.cn.png

index.w文件

<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">
<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:30px;top:242px;">
<div component="$UI/system/components/justep/data/data" autoLoad="true" xid="data1" idColumn="fID"><column label="fID" name="fID" type="String" xid="xid1"></column>
<column label="列表标题" name="fTitle" type="String" xid="xid2"></column>
<column label="发布人" name="fAuthor" type="String" xid="xid3"></column>
<column label="下载地址" name="fUrl" type="String" xid="xid4"></column>
<column label="本地文件名称" name="fLocalName" type="String" xid="xid5"></column>
<data xid="default1">[{"fID":"1","fTitle":"文件下载测试1","fAuthor":"biyao","fUrl":"http://movie.ks.js.cn/flv/other/1_0.mp4","fLocalName":"1.mp4"},{"fID":"2","fTitle":"文件下载测试2","fAuthor":"biyao","fUrl":"http://sd.downxia.com/down/pptview2003.rar","fLocalName":"pptview2003.rar"},{"fID":"3","fTitle":"文本下载测试3","fAuthor":"biyao","fUrl":"http://filelx.liqucn.com/didi_psngr_v4.2.5_50010.apk","fLocalName":"didi_psngr_v4.2.5_50010.apk"}]</data></div></div>
<div component="$UI/system/components/justep/panel/panel"
class="x-panel x-full" xid="panel1">
<div class="x-panel-top" xid="top1">
<div component="$UI/system/components/justep/titleBar/titleBar" title="文件下载例子"
class="x-titlebar">
<div class="x-titlebar-left">
<a component="$UI/system/components/justep/button/button"
label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
onClick="{operation:'window.close'}" xid="backBtn">
<i class="icon-chevron-left"/>
<span></span>
</a>
</div>
<div class="x-titlebar-title">文件下载例子</div>
<div class="x-titlebar-right reverse">
</div>
</div>
</div>
<div class="x-panel-content x-scroll-view" xid="content1" _xid="C6F7F7DA4B0000019BF4121064101880" style="bottom: 0px;"><div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView" xid="scrollView1">
<div class="x-content-center x-pull-down container" xid="div1">
<i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i1"></i>
<span class="x-pull-down-label" xid="span1">下拉刷新...</span></div>
<div class="x-scroll-content" xid="div2"><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="data1">
<ul class="x-list-template" xid="listTemplateUl1">
<li xid="li1"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
<div class="x-col x-col-50 x-col-center" xid="col1"><div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" bind-ref="ref('fTitle')"></div></div>
<div class="x-col x-col-20 x-col-center" xid="col2">
<div class="progress" style="margin-bottom:0px;" xid="div5">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" xid="progressbar1"></div></div></div><div class="x-col x-col-fixed x-col-center" xid="col3"><a component="$UI/system/components/justep/button/button" class="btn btn-default" label="下载" xid="button1" onClick="downLoadFile">
<i xid="i2"></i>
<span xid="span3">下载</span></a>
<a component="$UI/system/components/justep/button/button" class="btn btn-default" label="打开" xid="button2" onClick="openFile">
<i xid="i3"></i>
<span xid="span4">打开</span></a>
</div></div></li></ul> </div></div>
<div class="x-content-center x-pull-up" xid="div3">
<span class="x-pull-up-label" xid="span2">加载更多...</span></div> </div></div>
</div>
</div>

复制代码

index.js文件

define(function(require){
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
require("$UI/system/lib/cordova/cordova");
require("cordova!org.apache.cordova.open");
require("cordova!org.apache.cordova.file");
require("cordova!org.apache.cordova.file-transfer");
var Model = function(){
this.callParent();
};
Model.prototype.downLoadFile = function(event){
var divProgress = $(event.source.domNode.parentElement.parentElement).find("div[xid='progressbar1']"); //获取当前行的进度条XID
var downLoadBtn = $(event.source.domNode.parentElement).find("a[xid='button1']")
var row = event.bindingContext.$object; //获取当前行的数据
var filePath = 'file:///storage/emulated/0/biyao/'+ row.val('fLocalName'); //下载路径,数据库保存文件名
var uri = encodeURI(row.val('fUrl')); //下载地址
var fileTransfer = new FileTransfer();
fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100)+ "%"; //获取已下载和总大小的百分比
if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
{
divProgress.css("width",percentProgress); //设置进度条的样式
divProgress.html(percentProgress); //设置进度条里面的数字
}
};
fileTransfer.download( //调用对象的下载方法，开始下载
uri,
filePath,
function(entry) {
console.log("download complete: " + entry.fullPath);//下载完成后调用方法
//这里下载完成后，将进度条隐藏或者写其他需要的代码
downLoadBtn.hide();
},
function(error) { //出错回调函数
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
false,
{
headers: {
"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
}
}
);
};
Model.prototype.openFile = function(event){
var row = event.bindingContext.$object;
var localUrl = "file:///storage/emulated/0/biyao/"+ row.val('fLocalName');
var open = cordova.plugins.disusered.open;
function success() {
justep.Util.hint('正在打开！！！');
}
function error(code) {
if (code === 1) {
alert('文件未在本地保存，请点击下载！');
} else {
justep.Util.hint('未知错误，请联系管理员！');
}
}
open(localUrl, success, error);
};
return Model;
});

复制代码

byrrj · 发表于 2016-3-15 17:51:19

能做文件上传吗

biyaooo · 发表于 2016-3-15 17:53:28

byrrj 发表于 2016-3-15 17:51
能做文件上传吗

文件上传已经有Masion大神做了，我就不重复了。他有DEMO了，你论坛找找

ecoolper · 发表于 2016-3-15 17:56:33

赞一个

cc_day · 发表于 2016-5-23 15:03:56

用此案例测试下载，百度云盘上的docx文件时，为什么报未找到文件的错误呢？测试文档下载地址：http://yqall02.baidupcs.com/file ... ;to=qyac&fm=Yan,B,T,t&sta_dx=0&sta_cs=0&sta_ft=docx&sta_ct=0&fm2=Yangquan,B,T,t&newver=1&newfm=1&secfm=1&flow_ver=3&pkey=1400996f693bcfb9d7868d8959f12029d0a198ac4ad1000000002d69&sl=73269326&expires=8h&rt=pr&r=119044794&mlogid=3331057078306105225&vuk=2536671038&vbdid=1370636684&fin=testDown.docx&fn=testDown.docx&slt=pm&uta=0&rtype=1&iv=0&isw=0&dp-logid=3331057078306105225&dp-callid=0.1.1

cc_day · 发表于 2016-5-23 15:05:14

cc_day 发表于 2016-5-23 15:03
用此案例测试下载，百度云盘上的docx文件时，为什么报未找到文件的错误呢？测试文档下载地址：http://yqall ...

http://yqall02.baidupcs.com/file ... amp;dp-callid=0.1.1

rm50655739 · 发表于 2016-6-8 15:31:48

请问w文件有下载没有？

Story · 发表于 2016-6-21 20:16:07

你好请问你这个下载调用了插件以后不需要写什么后台java么？直接js+调用插件就可以实现下载么？

Story · 发表于 2016-6-21 20:23:09

还有，我看了一下这段代码  里面有个列 name是fUrl <column label="下载地址" name="fUrl" type="String" xid="xid4"></column>
然后接着往下看又发现了三个 fUrl":"http://movie.ks.js.cn/flv/other/1_0.mp4"  "fUrl":"http://sd.downxia.com/down/pptview2003.rar", fUrl":"http://filelx.liqucn.com/didi_psngr_v4.2.5_50010.apk
想问一下楼主  这三个fUrl是怎么得到的？还是直接给的呢？

biyaooo · 发表于 2016-7-8 11:05:12

Story 发表于 2016-6-21 20:23
还有，我看了一下这段代码里面有个列 name是fUrl
然后接着往下看又发现了三个 fUrl":"http://movie.ks. ...

我是直接放到data本地的数据里面了，你可以从数据库取出来赋值的

		自动登录	找回密码
密码			注册

[分享]利用WEX5做的一个下载文件功能的实例

点评