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>