H5调用系统相册ActionSheet无效个例子 img属性没有type=“file” 所以调用不了相册事件，如果想实现。。。。

最新推荐文章于 2019-01-15 13:37:22 发布

置顶 qiji_xiaofeng

最新推荐文章于 2019-01-15 13:37:22 发布

阅读量989

点赞数

本文链接：https://blog.csdn.net/u014370269/article/details/80466820

版权

必需的属性

alt	text	规定图像的替代文本。

alt

text

规定图像的替代文本。

src	URL	规定显示图像的 URL。

src

URL

规定显示图像的 URL。

可选的属性

align	top bottom middle left right	不推荐使用。规定如何根据周围的文本来排列图像。
border	pixels	不推荐使用。定义图像周围的边框。
height	pixels %	定义图像的高度。
hspace	pixels	不推荐使用。定义图像左侧和右侧的空白。
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。
vspace	pixels	不推荐使用。定义图像顶部和底部的空白。
width	pixels %	设置图像的宽度。

但如果想点击图片调用相册时<Img width="50" height="50" type="file" accept="image/*" d="imgShow2" />typefile就无效了，因为没有这个属性，所以唤起不了的。

所以那：这样写，如果sheet无效时看是否引入NativeUI.jar

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "zh" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  title 
  >Title 
  </ 
  title 
  > 
 
  < 
  img 
  src= 
  "favicon.ico" 
  onclick= 
  "javascript:_onClick()" 
  /> 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  </ 
  body 
  > 
 
  < 
  script 
  > 
 
  function 
  _onClick() { 
 
  showActionSheet(); 
 
   } 
 
  //点击事件，弹出选择摄像头和相册的选项 
 
  function 
  showActionSheet() { 
 
  debugger; 
 
  var bts = [{ 
 
   title: 
  "拍照" 
 
   }, { 
 
   title: 
  "从相册选择" 
 
   }]; 
 
  plus. 
  nativeUI. 
  actionSheet({ 
 
   cancel: 
  "取消", 
 
   buttons: bts 
 
   }, 
 
  function( 
  e) { 
 
  if ( 
  e. 
  index == 
  1) { 
 
  getImage(); 
 
   } 
  else 
  if ( 
  e. 
  index == 
  2) { 
 
  galleryImgs(); 
 
   } 
 
   } 
 
   ); 
 
   } 
 
  //图片显示 
 
  function 
  showPics( 
  url, 
  name){ 
 
  //根据路径读取到文件 
 
  plus. 
  io. 
  resolveLocalFileSystemURL(url, 
  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(); 
 
  var picIndex = 
  $( 
  "#picIndex"). 
  val(); 
 
  var nowIndex = 
  parseInt(picIndex)+ 
  1; 
 
  $( 
  "#picIndex"). 
  val(nowIndex); 
 
  var html = 
  ''; 
 
   html += 
  '<div class="image-item " id="item'+nowIndex+ 
  '">'; 
 
   html += 
  '<div class="image-close" οnclick="delPic('+nowIndex+ 
  ')">X</div>'; 
 
   html += 
  '<div><img src="'+picUrl+ 
  '" class="upload_img" style="width:100%;height:100%;"/></div>'; 
 
   html += 
  '</div>'; 
 
   html += 
  $( 
  "#image-list"). 
  html(); 
 
  $( 
  "#image-list"). 
  html(html); 
 
   } 
 
   }); 
 
   }); 
 
   } 
 
  //压缩图片 
 
  function 
  compressImage( 
  url, 
  filename){ 
 
  var name= 
  "_doc/upload/"+filename; 
 
  plus. 
  zip. 
  compressImage({ 
 
   src:url, 
  //src: (String 类型 )压缩转换原始图片的路径 
 
   dst:name, 
  //压缩转换目标图片的路径 
 
   quality: 
  40, 
  //quality: (Number 类型 )压缩图片的质量.取值范围为1-100 
 
   overwrite: 
  true 
  //overwrite: (Boolean 类型 )覆盖生成新文件 
 
   }, 
 
  function( 
  zip) { 
 
  //页面显示图片 
 
  showPics( 
  zip. 
  target,name); 
 
   }, 
  function( 
  error) { 
 
  plus. 
  nativeUI. 
  toast( 
  "压缩图片失败，请稍候再试"); 
 
   }); 
 
   } 
 
  //调用手机摄像头并拍照 
 
  function 
  getImage() { 
 
  var cmr = 
  plus. 
  camera. 
  getCamera(); 
 
  cmr. 
  captureImage( 
  function( 
  p) { 
 
  plus. 
  io. 
  resolveLocalFileSystemURL(p, 
  function( 
  entry) { 
 
  compressImage( 
  entry. 
  toLocalURL(), 
  entry. 
  name); 
 
   }, 
  function( 
  e) { 
 
  plus. 
  nativeUI. 
  toast( 
  "读取拍照文件错误：" + 
  e. 
  message); 
 
   }); 
 
   }, 
  function( 
  e) { 
 
   }, { 
 
   filter: 
  'image' 
 
   }); 
 
   } 
 
  //从相册选择照片 
 
  function 
  galleryImgs() { 
 
  plus. 
  gallery. 
  pick( 
  function( 
  e) { 
 
  var name = 
  e. 
  substr( 
  e. 
  lastIndexOf( 
  '/') + 
  1); 
 
  compressImage(e,name); 
 
   }, 
  function( 
  e) { 
 
   }, { 
 
   filter: 
  "image" 
 
   }); 
 
   } 
 
  < 
  / 
  script 
  > 
 
  </ 
  html 
  >

qiji_xiaofeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
H5调用系统相册ActionSheet无效个例子 img属性没有type=“file” 所以调用不了相册事件，如果想实现。。。。

必需的属性alttext规定图像的替代文本。srcURL规定显示图像的 URL。可选的属性aligntopbottommiddleleftright不推荐使用。规定如何根据周围的文本来排列图像。borderpixels不推荐使用。定义图像周围的边框。heightpixels%定义图像的高度。hspacepixels不推荐使用。定义图像左侧和右侧的空白。ismapURL将图像定义为服务器端图像映射。...
复制链接

扫一扫