MUI――文件系统、相册、拍照

匿名 (未验证) 提交于 2019-12-02 23:52:01
plus.gallery.pick( function(e){     for(var i in e.files){         var fileSrc = e.files[i];         var src=fileSrc+"?version="+new Date().getTime();         resizeImage(src)     } }, function ( e ) { },{     filter: "image",     multiple: true,     maximum: MAX_LEN - len,//动态计算可选长度     system: false,     onmaxed: function() {         if(len == 0 ){             plus.nativeUI.alert('最多只能选择'+ MAX_LEN +'张图片');         }else{             plus.nativeUI.alert('最多只能上传'+ MAX_LEN +'个文件');         }     } });  function resizeImage(url) {     plus.nativeUI.showWaiting()     if (0 != url.toString().indexOf("file://")) {         url = "file://" + url;     }     plus.io.resolveLocalFileSystemURL(url, function(entry) {         entry.file(function(file) {             var reader = new plus.io.FileReader();             reader.readAsDataURL(file);             reader.onloadend = function(e) {                 var dataURL = e.target.result;//base64格式的地址,可直接插入img src展示                 var base64str = dataURL;                 dataURL = dataURL.split(",")[1];                 dataURL = window.atob(dataURL);                 var ia = new Uint8Array(dataURL.length);                 for (var i = 0; i < dataURL.length; i++) {                     ia[i] = dataURL.charCodeAt(i);                 };                 var fileName = entry.toLocalURL().substring(entry.toLocalURL().lastIndexOf("/") + 1).toLowerCase();                 var data = new Blob([ia], {type: fileName}, 0.5);                 var o = {                     fileType: "image",                     filename: fileName,                     data: data                 }                 filesData.push(o);                  htm = '<li class="mui-table-view-cell">' +                     '<img class="mui-media-object mui-pull-left" src="' + base64str + '"  data-preview-src="" data-preview-group="1">' +                     '<div class="mui-media-body middle-part imageFile">' +                     '<p class="name mui-ellipsis file">' + fileName + '</p>' +                     '<p>' + size + '</p>' +                     '</div>' +                     '<div class="mui-media-object icon" data-index="'+ len +'" data-fileType="image">' +                     '<span class="mui-icon mui-icon-trash"></span>' +                     '</div>' +                     '</li>';                 $("#attachment").append(htm);                 addNum();                 plus.nativeUI.closeWaiting();             };         }, function(e) {             plus.nativeUI.closeWaiting();             mui.toast("读写出现异常: " + e.message);         })     }, function(e) {         plus.nativeUI.closeWaiting();     }) };
var camera = plus.camera.getCamera();  camera.captureImage(function(e) {      plus.io.resolveLocalFileSystemURL(e, function(entry) {         var src = entry.toLocalURL();         plus.zip.compressImage({  //压缩成jpg格式图片,以减小上传             src: src,               dst: src,               format:"jpg",             overwrite: true           }, function(e) {              var target = e.target;             var size = e.size;              plus.gallery.save(target); //保存到相册             resizeImage(target);         }, function(err) {               console.log("压缩失败:  " + err.message);           });     }, function(e) {         console.log("读取文件错误:" + e.message)     }); }, function(src) {  }, {     filename: "_doc/camera/",     index:1 })

这个涉及兼容问题,安卓可以通过'input[type=file]'打开手机文件系统,苹果系统则不能,只能打开应用下的文件,可参考H5+ demo实现

  • 讲讲安卓实现
<input type="file" id="files" style="display: none;"> // html <script>     function getFile() {         if (plus.os.name == "iOS") {             //ios 处理逻辑         } else {             $("#files").trigger("click");         }     }     $("#files").on('change', function(e) {         var filename = e.target.value;         filename = filename.substring(filename.lastIndexOf("\\") + 1).toLowerCase();         var blob = this.files[0];   //文件对象         var SIZE = blob.size;         if (SIZE == 0) {             mui.toast("上传文件大小不能为空 ");             return;         }         var ext = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();          var obj = {};         obj.blobobj=blob;         obj.fileExt= ext;         obj.filename= filename;         var o = {             fileType: "file",             data: obj         }         filesData.push(o);         var file = this.files[0];         var size = bytesToSize(file.size);  //计算文件大小         var extClassName = checkExt(ext);  //判断文件是否是图片         var isImage = extClassName === 'img' ? true : false;         if (isImage) {//图片处理方法             plus.nativeUI.showWaiting()             var reader = new FileReader();             reader.readAsDataURL(file);             reader.onload = function(e) {                 var img = new Image();                 img.src = reader.result;                 img.onload = function() {                     var w = img.width,                         h = img.height;                     var canvas = document.createElement('canvas');                     var ctx = canvas.getContext('2d');                     $(canvas).attr({                         width: w,                         height: h                     });                     ctx.drawImage(img, 0, 0, w, h);                     var base64 = canvas.toDataURL('image/jpeg', 0.5); // 可以直接插入img标签src属性进行展示                     var result = {                         url: window.URL.createObjectURL(file),                         base64: base64,                         clearBase64: base64.substr(base64.indexOf(',') + 1),                         suffix: base64.substring(base64.indexOf('/') + 1, base64.indexOf(';')),                     };                     htm = '<li class="mui-table-view-cell">' +                         '<img class="mui-media-object mui-pull-left" src="' + base64 + '"  data-preview-src="" data-preview-group="1">' +                         '</li>';                     $("body").append(htm);                     canvas = null;                     plus.nativeUI.closeWaiting()                 }             }         } else {//文档处理方法             htm = '<li class="mui-table-view-cell">' +                 '<div class="mui-media-object mui-pull-left' + extClassName + '"></div>' +                 '<div class="mui-media-body middle-part">' +                 '<p class="name mui-ellipsis file">' + filename + '</p>' +                 '<p>' + size + '</p>' +                 '</div>' +                 '<div class="mui-media-object icon" data-index="'+ len +'" data-fileType="file">' +                 '<span class="mui-icon mui-icon-trash"></span>' +                 '</div>' +                 '</li>'             $("body").append(htm);         }     });     function checkExt(ext) {         switch (ext) {             case 'png':             case 'jpg':             case 'jpeg':             case 'gif':                 return 'img';                 break;             case 'doc':             case 'rtf':             case 'docx':                 return 'word';                 break;             case 'txt':                 return 'txt';                 break;             case 'xls':             case 'xlsx':                 return 'excel';                 break;             case 'ppt':             case 'pptx':                 return 'ppt';                 break;             case 'pdf':                 return 'pdf';                 break;             case 'amr':             case 'wav':                 return 'record';                 break;             default:                 return ext;                 break;         }     }     function bytesToSize(bytes, flag) {         if (flag) {             bytes = bytes * 1024         }         if (bytes === 0) return '0 B';          var k = 1024;          sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];          i = Math.floor(Math.log(bytes) / Math.log(k));         return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];     }     function ext(name) {         var index = name.lastIndexOf('.');         return name.substr(index + 1)     } </script>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!