h5 app开发使用cordova调用相册、相机、文件系统或录音录视频，并上传到服务器_cordova 插件 如何引导h5打开相机

一、调用相册、相机、文件系统


//首先引用cordova
require("cordova!cordova-plugin-camera");   //调用摄像头类  
require("cordova!cordova-plugin-file-transfer");    //调用文件上传转换类  

//调用cordova
navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {      
        destinationType : navigator.camera.DestinationType.FILE_URI,
 // 返回类型：DATA_URL= 0，返回作为 base64 編碼字串。 FILE_URI=1，返回影像档的 URI。NATIVE_URI=2，返回图像本机URI （在andorid中 FILE_URI和NATIVE_URI返回的结果是一样的）
        quality : 100,      //图片质量  0-100
        targetWidth : 200,  //照片宽度
        targetHeight : 200,  //照片高度
        saveToPhotoAlbum : true,  //保存到手机相册
        encodingType:Camera.EncodingType.JPEG,  //保存的图片格式： JPEG = 0, PNG = 1
        allowEdit : false,      //选择之前允许修改截图 
        cameraDirection:0,     //前后摄像头类型：Back= 0,Front-facing = 1
        sourceType : navigator.camera.PictureSourceType.PHOTOLIBRARY , 
        //从哪里选择图片：PHOTOLIBRARY=0，相机拍照=1，SAVEDPHOTOALBUM=2。0和1其实都是本地图库
        mediaType:0,        
        //可选媒体类型：圖片=0，只允许选择图片將返回指定DestinationType的参数。 視頻格式=1，允许选择视频，最终返回 FILE_URI。ALLMEDIA= 2，允许所有媒体类型的选择。
       });  

//成功的回调
function onLoadImageSuccess(imageData) {// imageURI imageData  
      console.log("调用相册返回的数据:"+imageData);
      //使用FileTransfer上传到服务器
      var options = new FileUploadOptions(); //文件参数选项
      options.fileKey = "file";//向服务端传递的file参数的parameter name
      options.fileName = imageData.substr(imageData.lastIndexOf('/'),imageData.lastIndexOf('?')-imageData.lastIndexOf('/'));//文件名一般返回的是app在手机的对应包下的缓存目录+?时间戳
      options.mimeType = "image/jpeg";//文件格式，默认为image/jpeg
      var ft = new FileTransfer();//文件上传类
      ft.upload(imageData, encodeURI('http://192.168.0.4:8080/baas/mychat/messageTransform/uploadPicForUri'),
      //服务器处理该请求的地址，此处为本人的wex5baas的action地址
      function(success){}, //成功回调
      function(error){}, //失败回调
      options);
}
//失败的回调
function onLoadImageFail(error) {  
     console.log("调用相册失败的消息："+error);  
     }  


//服务端解析该文件(以表单形式上传到服务器)
//此处贴出wex5的解析方式：
public static JSONObject uploadPicForUri(JSONObject params,ActionContext context) {
        System.out.println("--------------上传------------------");
        HttpServletRequest request=(HttpServletRequest) context.get(ActionContext.REQUEST);
        String contentType = request.getContentType();
        System.out.println("文件类型:"+contentType);

        Map<String, String> param = new HashMap<String,String>();
        List<FileItem> items =  parseMultipartRequest(request);

        System.out.println("FILEITEMSIZE = " + items.size());

        FileItem fileItem = null;
        Iterator<FileItem> iter = items.iterator();
        while (iter.hasNext()) {
            FileItem item = iter.next();
            if (item.isFormField()) {   //参数
                String name = item.getFieldName();
                String value = item.getString();
                param.put(name, value);
                System.out.println("name:"+name+",value:"+value);
            } else {
                fileItem = item;
                System.out.println(fileItem);
            }
        }
        return null ;
    }

    /**
     * 解析POST表单数据
     * */
    public static List<FileItem> parseMultipartRequest(HttpServletRequest request) throws FileUploadException{
        DiskFileItemFactory factory = new DiskFileItemFactory();

        ServletContext servletContext = request.getSession().getServletContext();
        File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
        factory.setRepository(repository);

        // Create a new file upload handler
        ServletFileUpload upload = new ServletFileUpload(factory);

        // Parse the request
        @SuppressWarnings("unchecked")
        List<FileItem> items = upload.parseRequest(request);

        return items;
    }

二、录音、录视频


document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    //经测试在wex5 3.6中 该写法可用 视频是captureVideo方法
    navigator.device.capture.captureAudio(function(){console.log("success");},function(){console.log("error");},{limit:1});
    //官方文档也声明了其他的写法，但本人的环境不可用，具体可查官方文档
    //navigator.MediaDevices.getUserMedia(src,onSuccess,Onerror);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105