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的封装。

MUI学习笔记之图片上传和预览相关推荐

MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览
目录一.网络请求 1.1 发送get请求二.数据缓存 2.1 uni.setStorage(OBJECT) 2.2 uni.setStorageSync(KEY,DATA) 2.3 uni.get ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...

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

MUI学习笔记之图片上传和预览相关推荐

最新文章

热门文章