MUI学习笔记之图片上传和预览

最新推荐文章于 2021-08-06 12:44:38 发布

永恒之夜

最新推荐文章于 2021-08-06 12:44:38 发布

阅读量3.2k

点赞数

分类专栏： mui

mui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

MUI学习笔记之图片上传和预览

源代码是从博客园下载

我一边学习，一边注释，力求理解

<head>

<style>

.imageup{ width:100px; height: 36px; line-height:36px;} //这是上传图片按钮的css样式

.button{ width:100px; height: 50px; line-height:50px;} //这是button的样式主要是图片的上传

ul li p{

display: inline-block;//无序链表下的p元素呈现线性块状

}

</style>

</head>

<body>

<ul class="list">将不同的上传部件放于一个列表中

<img id="headimg" class="headimg" src='' height="150" width="150">//图片预览的img

</li>

</li>

</li>

</ul>

主要部分是 js部分

//扩展API完成后执行的操作

function plusReady(){

//给选中的li增加判别class

$(".list li").on("tap",".imageup",function(){//on 方法是事件绑定

//tap是mui的按下事件，目标是所有使用imageup的html组件

alert('11');

var $li = $(this).parents("li");//获取祖先节点中的li

console.log($($li).text())

$li.addClass("selectLi");//addclass是添加css的方法

$li.siblings().removeClass("selectLi"); siblings找到所有兄弟节点 removeclass 移除某一个css样式

page.imgUp();//打开imgup方法

})

}

//弹出系统按钮选择框

var page=null;

page={

imgUp:function(){

var m=this;

/* console.log(m);*/

plus.nativeUI.actionSheet({cancel:"取消",buttons:[ // nativeUI管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等

{title:"拍照"},

{title:"从相册中选择"}

]}, function(e){//1 是拍照 2 从相册中选择

switch(e.index){

case 1:appendByCamera();break; //appendByCamara调用相机的方法

case 2:appendByGallery();break; //调用相册的方法

}

});

}

// 拍照添加文件

function appendByCamera(){//拍照方法

plus.camera.getCamera().captureImage(function(e){//调用原生的相机

console.log("e is" + e);

plus.io.resolveLocalFileSystemURL(e, function(entry) {//获取相片的存储路径

var path = entry.toLocalURL();//获取本地路径

var indexa = liIndex()//获取上传的是第张照片

console.log(indexa);

$(".headimg")[indexa].src = path; //图片显示在所有使用heading img样式的第indexa个元素上

}, function(e) {

mui.toast("读取拍照文件错误：" + e.message);

});

}

// 从相册添加文件

function appendByGallery(){

plus.gallery.pick(function(path){//打开手机相册的方法

var indexa = liIndex();//获取这是第几个元素

console.log(indexa);

$(".headimg")[indexa].src = path;显示选择的图片

});

}

//服务端接口路径

var server = "http://www.test.cn/aaa.php";//set服务器地址

//获取图片元素

var files = document.getElementById('headimg');//找到图片

// 上传文件

function upload(){

var wt=plus.nativeUI.showWaiting();//显示等待框

var task=plus.uploader.createUpload(server,//文件上传方法

{method:"POST"},//上传方式post

function(t,status){ //上传完成服务器返回了信息

if(status==200){

alert("上传成功："+t.responseText);

wt.close(); //关闭等待提示按钮

}else{

alert("上传失败："+status);

wt.close();//关闭等待提示按钮

}

);

//添加其他参数

task.addData("name","test");//相当于formData方法

task.addFile(files.src,{key:"dddd"});

task.start();

}

//判断点击的是上传的第几个li

function liIndex(){

var lis = $(".list").children();

console.log(lis.length)

for(var i = 0; i < lis.length;i++){

console.log($(lis[i]).attr("class"))

var lisClass = $(lis[i]).attr("class").split(" ");

if(lisClass[2] == "selectLi"){

console.log(i);

return i;

}

//扩展API是否准备好，如果没有准备好则监听plusReady

if(window.plus){

plusReady();

}else{

document.addEventListener("plusready",plusReady,false);

//添加事件监听监听plusready事件

}

</script>

以上代码的主要设计思想如下：

第一，我要在同一个页面上上传很多个图片

使用plus的事件来进行

当我点击imageup样式的按钮的时候，获取当前节点所在位置，给他一个css样式来确定他是第几个要上传的图片，并且把其他的都清除该样式

然后启动 page.Imgup方法

该方法会弹出选择让你选择不同的图片获取方式

如果是相机

打开相机拍照后获取文件位置，通过css标识去识别文件显示的地方，把图片显示出来

相册一样

上传

上传主要是使用plus的上传方法，其实是对ajax和FormData的封装。

永恒之夜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
MUI学习笔记之图片上传和预览

MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习，一边注释，力求理解 &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,...
复制链接

扫一扫

专栏目录