关闭

js实现获取手机相册并上传

时间: 2018-08-21阅读: 2870标签: js知识

在写易沃克项目时,一直苦于无路去实现将图片上传至服务器 。这是我的解决方案 
当初有很多人说使用form方法将文件封装来上传,可是因为要照顾到从相机中选择图片,所以一直没有去做。 后来看到了Uploader的方法来传文件,感觉自己找到了 。他是使用plus.uploader来完成的


创建网络上传任务

function createUploader() {
    task = plus.uploader.createUpload(url, {
        method: 'POST'
    }, function(data, status) {
        if(status == 200) {
            plus.nativeUI.closeWaiting();
            var page = plus.webview.getWebviewById('view/dynamics/dynamics.html');
            mui.fire(page, 'refresh', {});
            mui.openWindow({
                id: 'index.html'
            });
        } else {
            mui.alert(status);
        }
    });

}


相机拍照并获取到图片


//从相机中选取图片
function clickCamera() {
    var c = plus.camera.getCamera();
    c.captureImage(function(e) {
        plus.io.resolveLocalFileSystemURL(e, function(entry) {

            var path = entry.toLocalURL();
            var name = name = path.substr(e.lastIndexOf('/') + 1);

            //压缩图片到内存
            plus.zip.compressImage({
                src: path,
                dst: '_doc/' + path,
                quality: 20,
                overwrite: true
            }, function(zip) {
                camera_photos.push({
                    path: zip.target
                });
                photos.push({
                    path: zip.target
                });
                showPhotos();
            }, function(error) {
                console.log("压缩error");
            });

        }, function(e) {
            mui.toast("读取拍照文件错误" + e.message);
        });
    })
};


获取手机相册,并为多选

var max = 9; //照片的最大数目
var galleryPhotoNum;
var galleryFiles;

function clickGallery() {
    //确定还可以从相册中选择照片的最大数目  
    galleryPhotoNum = max - camera_photos.length;
    plus.gallery.pick(function(path) {
        galleryFiles = path.files;
        plus.nativeUI.showWaiting();
        compressImg(galleryFiles, 0);
    }, function(e) {
        console.log("获取照片失败");
    }, {
        filter: "image",
        multiple: true,
        maximum: galleryPhotoNum,
        system: false,
        onmaxed: function() {
            mui.toast('最多选' + galleryPhotoNum + '个');
        },
        popover: true,
        selected: galleryFiles
    });
}


同时获取到多张图片那么图片的压缩便成了问题 ,我使用的是plus.zip.compressImage()来做,但是如果通过一个for循环来对图片进行压缩是无法完成的 。
因为for循环速度很快,而plus.zip.compressImg是异步执行的,而且手机执行的压缩方法是有限制的,3个,超过就直接不执行了。所以我们要保证当一张压缩成功之后,再执行下一张, 通过递归来保证

//递归压缩图片
function compressImg(files, file_index) {
    var file_length = files.length;
    var path = files[file_index];
    plus.zip.compressImage({
        src: path,
        dst: '_doc/' + path,
        quality: 20,
        overwrite: true
    }, function(zip) {
        var next_file_index = file_index + 1;
        if(file_index == 0) {
            gallery_photos = [];
        }
        gallery_photos.push({
            path: zip.target
        });
        addPhoto(zip.target, file_index);
        if(next_file_index < file_length) {
            compressImg(files, next_file_index);
        } else {
            showPhotos();
        }
    })
}

有点不对,好像有点跑题

继续前面提的文件上传, 上面我们新建了文件上传对象task 
如果我们想传值,task.addData(‘name’,value); 
如果想传文件,task.addFile(path,{ key:file.name }); 
当所需要上传的值,都加入之后,便可以使用task.start(); 

来开始所有任务了

task.addData('objectID', this_phoneNum);
    task.addData('describe', content);
    task.addData('position', "");
    task.addData('num', '' + len);
    for(var i = 0; i < len; i++) {
        var j = i + 1;
        var temp = 'phone' + j;
        task.addFile(photos[i].path, {
            key: temp
        });
    }
    task.start();


来源:https://blog.csdn.net/qq_32635069/article/details/72869100

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1024

关闭

Javascript实现模仿接口的3种方式

Javascript模仿接口可以有三种方式:1.注释法,此方法属于程序文档范畴,对接口的继承实现完全依靠程序员自觉 2.检查属性法,把要实现的接口方法添加到类属性列表里,通过定义好的检测反复检查是否已经实现了那些方法 3.鸭式辨形法

javascript难点是什么?

javascript难点是什么?下面本篇文章就来给大家介绍一下10个JavaScript难点,感兴趣的小伙伴们可以参考一下,希望对大家有所帮助。立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字

7个常见的 JavaScript 测验及解答

我相信学习新事物并评估我们所知的东西对自己的进步非常有用,可以避免了我们觉得自己的知识过时的情况。在本文中,我将介绍一些常见的 JavaScript 知识。请享用!

如何掌握并用好defer(延迟执行)

defer:在函数A内用defer关键字调用的函数B会在在函数A return后执行。先看一个基础的例子,了解一下defer的效果,这段代码运行后会打印出:

JavaScript支持宏吗?

与其它类 Lisp 语言不同,不支持宏是 JavaScript 与生俱来的一个问题,这是因为宏会在编译时操作语法树,而这在像 JavaScript 这样的语言中几乎是不可能的。

javascript的Object. hasOwnProperty方法

hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中(非继承属性)是否具有指定的属性,如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

深入理解Javascript中apply、call、bind方法的总结。

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;第一个参数都是this要指向的对象,也就是想指定的上下文;都可以利用后续参数传参;bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

Js输出方式有哪些?

在编写JavaScript代码的时候, 一定要记住每一句代码后面都需要添加一个分号, 并且这个分号必须是英文的分号,我们会发现有时候不写分号程序也能够运行, 这里并不是因为不需要分号, 而是浏览器自动帮助我们添加了分号

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

js浮点数精度丢失问题_如何解决js中浮点数计算不精准?

理解javascript中浮点数计算不精准的原因,如何解决浮点数的四则运算(加减乘除)。js中除了toFixed方法以外的实现方法总汇

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!