MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器

引入文件

css:mui.min.css、app.css、iconfont.css、feedback-page.css、font-awesome.min.css

js:jquery.js、common.js、utitls.js

相关文件见：https://pan.baidu.com/s/1ITkQuUzXn05DeDuV1cLB9w 密码：l1fx

css:

<style>  .table-view {  position: relative;  margin-top: 0;  margin-bottom: 0;  padding-left: 0;  list-style: none;  background-color: #f5f5f5;  }  .table-view-cell {  position: relative;  overflow: hidden;  padding: 0px 15px;  -webkit-touch-callout: none;  margin-bottom: 1px;  }  .table-view-cell:after {  position: absolute;  right: 0;  bottom: 0;  left: 0px;  height: 1px;  content: '';  -webkit-transform: scaleY(.5);  transform: scaleY(.5);  background-color: #c8c7cc;  }  .table-view-cell>a:not(.btn) {  position: relative;  display: block;  overflow: hidden;  margin: -0px -15px;  padding: inherit;  white-space: nowrap;  text-overflow: ellipsis;  color: inherit;  background-color: #75b9f4;  height: 40px;  line-height: 40px;  }  .navigate-right:after  {  font-family: Muiicons;  font-size: inherit;  line-height: 1;  position: absolute;  top: 50%;  display: inline-block;  -webkit-transform: translateY(-50%);  transform: translateY(-50%);  text-decoration: none;  color: #666;  -webkit-font-smoothing: antialiased;  }  .table-view-cell.collapse .collapse-content {  position: relative;  display: none;  overflow: hidden;  margin: 0px -15px 0px;  padding: 0px 0px !important;  -webkit-transition: height .35s ease;  -o-transition: height .35s ease;  transition: height .35s ease;  background-color: transparent;  }  .image-item{  position: relative;  }  .image-item .info{  position: absolute;  top:0px;  left:4px;  color: #ff9900;  font-size: 12px;                          }  </style>

HTML:

<div class="panel feedback"><div class="content"><input type="hidden" id="ckjl.id" name="ckjl.id" value="429">  <div class="collapse-content" >  <form>  <label class="row-label"></label>  <div id='F_CKJLBS' class="row image-list">  <div class="image-item" id="F_CKJLB" onclick="showActionSheet(this);"></div>  </div>  </form>  </div></div></div>

JS:

//选取图片的来源，拍照和相册
function showActionSheet(conf){var divid = conf.id;  var actionbuttons=[{title:"拍照"},{title:"相册选取"}];  var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};  plus.nativeUI.actionSheet(actionstyle, function(e){  if(e.index==1){  getImage(divid);  }else if(e.index==2){  galleryImg(divid);  }  } );
} //相册选取图片
function galleryImg(divid) {  plus.gallery.pick( function(p){  //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  plus.io.resolveLocalFileSystemURL(p, function(entry) {  //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  //alert(entry.name);//IMG_20160704_112620.jpg  compressImage(entry.toLocalURL(),entry.name,divid); //压缩图片 }, function(e) {  plus.nativeUI.toast("读取拍照文件错误：" + e.message);  });  }, function ( e ) {  }, {  filename: "_doc/camera/",  filter:"image"  } );
}
// 拍照
function getImage(divid) {  var cmr = plus.camera.getCamera();  cmr.captureImage(function(p) {  //alert(p);//_doc/camera/1467602809090.jpg  plus.io.resolveLocalFileSystemURL(p, function(entry) {  //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg  //alert(entry.name);//1467602809090.jpg  compressImage(entry.toLocalURL(),entry.name,divid);  }, function(e) {  plus.nativeUI.toast("读取拍照文件错误：" + e.message);  });  }, function(e) {  }, {  filename: "_doc/camera/",  index: 1  });
}
//压缩图片
function compressImage(url,filename,divid){  var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpg  plus.zip.compressImage({  src:url,//src: (String 类型 )压缩转换原始图片的路径  dst:name,//压缩转换目标图片的路径  quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  },  function(event) {plus.io.resolveLocalFileSystemURL(event.target,function(entry){entry.file( function(file){  var fileReader = new plus.io.FileReader();  fileReader.readAsDataURL(file);  fileReader.onloadend = function(e) {var picUrl = e.target.result.toString();// $("#img").attr("src",picUrl)var arr = picUrl.split(',');var type = arr[0].match(/:(.*?);/)[1];//获得图片的类型//---把base64转化为二进制----var text = window.atob(picUrl.split(",")[1]);var buffer = new Uint8Array(text.length);var pecent = 0, loop = null;for (var i = 0; i < text.length; i++) {buffer[i] = text.charCodeAt(i);}var blob = getBlob([buffer], type);uploadImg(blob);// console.log(blob.size/1024+"kb");// fd = new FormData();//上边是FormData的介绍//  fd.append('photoupload',blob);//  console.log(fd)//fd里存有图片的二进制}  });  });return;//uploadf(event.target,divid);  var path = name;//压缩转换目标图片的路径  //event.target获取压缩转换后的图片url路  //filename图片名称  saveimage(event.target,divid,filename,path);  console.log(event.target)console.log(divid)console.log(filename)console.log(path)},function(error) {  plus.nativeUI.toast("压缩图片失败，请稍候再试");  });
}function uploadImg(blob){var Bh = $("#bianhao").val();if(!Bh){alert("编号不能为空！")return;}// alert(Bh)// return;var formdata = new FormData();formdata.delete("Bh");formdata.append("Bh", Bh);formdata.append("file", blob, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象formdata.delete("fileSize");formdata.append("fileSize", blob.size);plus.nativeUI.showWaiting("正在上传照片..");$.ajax({url: upLoadImgUrl,type: 'POST',data: formdata,async: true,cache: false,contentType: false,processData: false,datatype: "jsonp",success: function (result) {plus.nativeUI.closeWaiting(); // alert(result.fileName)alert('图片上传成功');showPicture(result,Bh);},error: function (result, status) {plus.nativeUI.closeWaiting(); alert('图片上传失败');return;}});
}function showPicture(result,Bh){var src = imgPath + "/UploadFile/Attachment/" + Bh + "/" + result.fileNamevar html = "";html +='<div  class="image-item ">';   html +='    <img data-preview-src="" id="picBig" src="'+src+'"/>';html +='    <div style="width:100%;position:absolute;bottom:0px;background:#eeeeee;text-align:center"><span style="color:red;font-size:12px">上传成功</span></div>';html +='</div>';  $("#F_CKJLBS").append(html);
}

转自：https://blog.csdn.net/qq_27626333/article/details/51896616

MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器相关推荐

探索HTML5 Plus 拍照或者相册选择图片上传过程
起因:webApp中需要一个拍摄照片并上传服务器的功能由于我正好使用Hbuilder在做webApp,所以自然想到了使用h5+中的调用摄像头功能从此开始了踩坑之旅... 1.手机连接电脑问题 ...
android拍照所需的权限,eclipse --- Android拍照，相册选择图片以及Android6.0权限管理...
[实例简介] eclipse --- Android拍照,相册选择图片以及Android6.0权限管理 [实例截图] [核心代码] camreainandroidm └── camreainandro ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信公众号H5开发——调用相册和摄像头并上传服务器
之前的文章介绍了关于微信JSSDK调用,下面介绍一下其中的一个最常用的功能--调用相册和摄像头使用此功能之前先参考:微信JSSDK 在通过了config接口验签成功之后,我们就可以调用微信JSSDK ...
uniapp选择图片裁剪,上传到服务器
uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. App端如需要更丰富的相机拍照API(如直接调用前置摄像头),参考plus.camera(opens new win ...
画世界上传图片提交到服务器_【MUI】选择图片并上传至服务器
最后更新17.01.20 一.首先这是HTML的代码将要显示一张图片二.然后这是JavaScript代码 var img_my = document.getElementById('my_img_ ...
cocos creator 调用相机相册裁剪图片并上传到服务器
大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...
前端解决手机拍照旋转问题及图片压缩上传
1.依赖 jquery.js 2.html部分 <input class="addImage" name="loadFile" type="f ...
FileUpload选择图片并上传
在上传按钮的事件里: //文件上传 protected void btn_Click(object sender, EventArgs e) { if (FileUpload1.HasFile)//判 ...

MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器

MUI+HTML5+Plus 拍照或者相册选择图片并上传服务器相关推荐

最新文章

热门文章