MUI+H5手机上传照片 支持多图片上传和拍照上传

news/2024/11/8 20:29:45/

html代码:

<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">拍照 </h1>
<a class="mui-icon-right-nav mui-pull-right">
<span id="headImage" class="mui-icon mui-icon-camera"></span>
</a>
<a class="mui-icon-right-nav mui-pull-right">
<span id="uploadImage" class="mui-icon mui-icon-upload"></span>
</a>
</header>
<div class="mui-content" style="background-color:#fff">
<ul id="imgs" class="mui-table-view mui-grid-view">
<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="images/shuijiao.jpg">
<span class="mui-icon mui-icon-trash deleteBtn"></span>
<div class="mui-media-body">
<input type="text" class="remark" placeholder="备注">
</div>
</a>
</li>-->
</ul>
</div>

Js代码:

var fileArr = [];
mui.init({
swipeBack: true //启用右滑关闭功能
});
document.getElementById('headImage').addEventListener('tap', function() {
if(mui.os.plus) {
var buttonTit = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];


plus.nativeUI.actionSheet({
title: "上传图片",
cancel: "取消",
buttons: buttonTit
}, function(b) { /*actionSheet 按钮点击事件*/
switch(b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg(); /*打开相册*/
break;
default:
break;
}
})
}
}, false);


// 拍照获取图片  
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
setFile(imgSrc);
setHtml(imgSrc);
}, function(e) {
console.log("读取拍照文件错误:" + e.message);
});
}, function(s) {
console.log("error" + s.message);
}, {
filename: "_doc/camera/"
})
}
// 从相册中选择图片   
function galleryImg() {
// 从相册中选择图片  
plus.gallery.pick(function(e) {
for(var i in e.files) {
var fileSrc = e.files[i];
setFile(fileSrc);
setHtml(fileSrc);
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true,
//maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择5张图片');
}
});
}


function setHtml(path) {
var str = '';
str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">'+
'<img class="mui-media-object" src="'+path+'">'+
'<span class="mui-icon mui-icon-trash deleteBtn"></span>'+
// '<div class="mui-media-body">'+
// '<input type="text" class="remark" placeholder="备注">'+
// '</div>'+
'</li>';
jQuery("#imgs").append(str);
}

function setFile(fileSrc){
var image = new Image();  
image.src = fileSrc;
fileArr.push(image);
}


document.getElementById('uploadImage').addEventListener('tap',function(){
var files = fileArr;
var wt=plus.nativeUI.showWaiting();
            var task=plus.uploader.createUpload('http://192.168.1.111:8181/sys-privilege/Upload',
                {method:"POST"},
                function(t,status){ //上传完成
                    if(status==200){
                        alert("上传成功:"+t.responseText);
                        wt.close(); //关闭等待提示按钮
                    }else{
                        alert("上传失败:"+status);
                        wt.close();//关闭等待提示按钮
                    }
                }
            );  
             //将文件集合添加到上传队列中
    for(var i=0;i<files.length;i++){
        var f=files[i];
        task.addFile(f.src,{key:i});
    }
    //传其他的参数 如备注
    //添加其他参数
    //遍历5个input框
    
            task.addData("comment","test");
            task.start();
});


http://www.ppmy.cn/news/768994.html

相关文章

vue-cute-timeline插件使用

效果 &#xff08;内容覆盖的有些丑&#xff0c;别在意哈&#xff0c;重点是时间线的展示&#xff09;element也有类似的时间线&#xff0c;但是不能使用类似这样的图片 所以就采用了vue-cute-timeline插件 使用方法&#xff08;可自行百度&#xff09; 安装&#xff1a;npm i…

使用css的:before属性在文字前加短竖线

有时候我们需要在文字或者标题前加个短竖线&#xff0c;有的人会使用 border 来模拟一个竖线&#xff0c;其实大可不必&#xff0c;我们可以利用元素的 :before 属性来实现&#xff0c;效果如下&#xff1a; 具体的代码如下&#xff0c; HTML&#xff1a; <span class&quo…

两个人的事情

唔得了。。。。。。我们这里的人了&#xff0c;你好&#xff01;&#xff01;&#xff01;&#xff01;&#xff1f;&#xff01;&#xff1f;&#xff01;&#xff01;&#xff1f;&#xff01;&#xff1f;&#xff01;&#xff1f;&#xff01;我的天啊&#xff01;&#xf…

创新电影院:手机看电影时代已到来

“移动电影院”的发布引发了行业内外的广泛关注。移动电影院是我国电影放映领域的创新尝试&#xff0c;是有别于电影新媒体播放模式&#xff0c;通过手机、平板电脑等移动终端或其可控制的其他设备搭载的移动电影院软件系统作为放映设备&#xff0c;向观众放映已取得《电影片公…

sync-player:使用websocket实现异地同步播放视频

本文作者&#xff1a;星空无限 原文链接&#xff1a;https://liyangzone.com/2020/09/20/%E5%89%8D%E7%AB%AF/sync-player/ GoEasy已获作者授权转载&#xff0c;GoEasy转载时有改动&#xff0c;感谢作者的分享。 前段时间我有这样一个需求&#xff0c;想和一个异地的人一起看电…

新上映的电影不在影院也一样能看到

【新上映的电影不在影院也一样能看到&#xff0c;不要告诉太多人】 来源&#xff1a; ❤林鑫℡的日志 大家都知道&#xff0c;正在电影院上映的电影&#xff0c;大多不允许有网络盗版下载&#xff0c;破坏它票房的。 所以迅雷狗狗会屏蔽这些电影的下载&#xff0c;尽管你搜到了…

Android手机之间实现屏幕共享

已经实现&#xff0c;优化空间还很大。 效果Gif 原理&#xff1a; 方法一&#xff1a;A手机不停的调用系统截图&#xff0c;将得到的数据压缩后不停的Socket发送至服务器&#xff0c;服务器得到数据后推送给B手机&#xff0c;B手机显示图片。 服务器我用nodejs简单写的。 方…

抖音一起看为什么显示服务器升级,抖音一起看视频功能是什么意思?抖音一起看视频怎么设置两个人...

抖音上线了一起看视频的功能&#xff0c;相信很多朋友刷抖音的时候都注意到了&#xff0c;也有的用户朋友对这个一起看功能不太了解&#xff0c;那么抖音一起看视频是什么功能呢&#xff1f;抖音两个人怎么一起看视频呢&#xff1f;下面最火软件站的小编就为大家带来抖音一起看…