快应用1000及之前版本的Web组件目前还不是元素,暂时无法在Web组件中直接上传文件。 据说1010版本会支持,但不知道能支持到什么程度。 可以支持照片上传吗? ? ?
我目前开发的项目原本在网页上有用户注册功能,在快应用上也放置了一个注册入口。 但是我无法通过注册时输入的方式上传身份证件和照片,所以我必须灵活地实现。
查看Web组件的相关帮助文档
发现有一个事件。 这和原来应用程序开发时控件的事件是一样的。 两者都可以实现Web组件主动通知框架程序的功能,这就是想法的由来。
假设你的h5页面上有一个控件可以选择图片文件并将图片上传到指定的URL进行接收。 URL(以下简称接收URL)上已指定接收后要存储的路径和存储文件名。 ),上传成功后即可预测上传文件的URL(以下简称文件URL)。
首先修改h5页面输入按钮的相关功能。 您可以根据来源决定是否使用该控件。 只需在使用快速应用程序打开页面时使用它即可。 然后,动态改变h5页面的标题,然后定期判断文件是否上传成功。
(){
//更改页面标题,通知快应用要上传图片
var tit = .title;
.title = "@@接收网址";
((){.title = tit;},1000); //设置完成后恢复标题,保证下次调用时可以更改标题
//启动定时器,定时判断图片是否已经上传到服务器。 最好指定最大测定次数。
变量=0;
var = ($(this).attr("intid"));
> 0 && ();
= ((){
var iUrl = 文件 URL;
//判断文件是否上传成功
$.ajax({
类型:'头',
网址:iUrl,
缓存:假,
异步:假,
:(数据,,xhr){
();
//文件已上传,进行后续操作
});
++;
//测试30次后不再测试
如果(>30){
();
},2000);
$(this).attr("intid", );
复制代码
快速应用程序定义放置在界面上的 Web 组件中的事件。
复制代码
然后检测事件中是否有文件上传请求。 当有上传请求时,会弹出上传提示。 您可以选择拍摄照片并上传或从图库中选择。
从 '@。'
从 '@。'
从 '@。'
来自“@.media”的媒体
从工作'
(对象){
var that = this;
if(!obj.title){}
if(obj.title.('@') == 0){
var finfo = obj.title.(8, );
那。((m, tp){
如果(tp ==“无”){
(“当前网络不可用,无法上传文件!”)
;
var msg = (m ? '您当前使用 ' + tp.() + ' 方式上网,上传文件会消耗流量,确定继续吗?\r\n\r\n' : '') + '请选择继续。 文件上传方式';
var btnA = [{
text: '照片上传',
颜色: '#'
},{
text: '从图库中选择',
颜色: '#'
}];
如果(米){
btnA.push({text: '取消',color: '#'})
.({
title: '文件上传',
: 消息,
:btnA,
:(资源){
if (res.index == 0) {
媒体。({
: (数据) {
那。(finfo,data.uri);
});
}否则如果(res.index == 1){
媒体。({
: (数据) {
那。(finfo,data.uri);
});
});
});
},
(卷起、卷起){
//furl为接收URL,furi为本地文件路径
var that = this;
var fname = 解析furl 获取文件名
//开始上传文件...');
.({
网址: 卷曲,
文件:[
乌里:福里,
名称:'文件',
: 名称
],
: (数据) {
//上传成功
},
失败:(数据,代码){
//上传失败
});
},
(){
.({
: (数据) {
如果(){
(数据.,数据.类型);
})
复制代码
这种方式的缺点是h5页面必须定期判断文件是否上传,会消耗一定的流量。 同时,h5和快应用都需要修改和适配。
好处是可以选择上传图片,也可以拍照上传,还可以在上传前判断手机上的网络情况。 (快应用下一版本据说还支持选择非图片文件的界面)
即使下个版本支持h5页面中的输入上传功能,但不确定是否支持照片上传,因此上述解决方法在版本升级后可能仍然有用。