手机端拍照上传+显示

暗夜的忧伤

首先需要require("$UI/system/lib/cordova/cordova");
1、js端
        Model.prototype.buttonClick = function(event) {
                var me = this;
                function onSuccess(imageURI) {
                        me.uploadImage(imageURI);
                }
                function onFail(message) {
                        return message;
                }
                navigator.camera.getPicture(onSuccess, onFail, {
                        quality : 50,
                        sourceType : 1//0、2为从相册文件中选择，1为拍照
                });
Model.prototype.uploadImage = function(imageURI) {
                var deferred = when.defer();
                var options = new FileUploadOptions();
                options.fileKey = "fileAddPic";// 用于设置参数
                options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
                // 如果是图片格式，就用image/jpeg，其他文件格式上官网查API
                options.mimeType = "image/jpeg";
                // 这里的uri根据自己的需求设定，是一个接收上传图片的地址
                var uri = encodeURI("http://10.71.84.211:8080/news/uploadImage?userID=admin");
                options.chunkedMode = false;
                var params = new Object();
                params.id = "1";
                params.name = "test";
                options.params = params;
                var ft = new FileTransfer();
                function success(result) {
                        deferred.resolve(imageURI);//改变执行状态
                        navigator.notification.progressStop();
//                        alert("成功" + JSON.stringify(result));

                }
                function fail(message) {
                        alert("失败:" + JSON.stringify(message));
                }
                // 上传回调
                ft.onprogress = showUploadingProgress;
                navigator.notification.progressStart("", "当前上传进度");
                ft.upload(imageURI, uri, success, fail, options);
        }
// 显示上传进度
function showUploadingProgress(progressEvt) {
if (progressEvt.lengthComputable) {
navigator.notification.progressValue(Math.round((progressEvt.loaded / progressEvt.total) * 100));
}
}

2、服务端

        @POST
        @Path("/uploadImage")
        @Consumes("multipart/form-data")
        public void upLoadImage(@Context HttpServletResponse response,
                        @Context HttpServletRequest request) throws IOException {
                File file1 = null;
                System.out.println("userID="+request.getParameter("userID"));
                DiskFileUpload disFileUpload = new DiskFileUpload();
                try {
                        List<FileItem> list = disFileUpload.parseRequest(request);
                        for (FileItem fileItem : list) {
                                if (fileItem.isFormField()) {
                                        System.out.println(fileItem.getFieldName() + ":"
                                                        + fileItem.getString());
                                } else {
                                        if ("fileAddPic".equals(fileItem.getFieldName())) {
                                                File remoteFile = new File(new String(fileItem
                                                                .getName().getBytes(), "UTF-8"));
                                                System.out.println("开始遍历.....");
                                                file1 = new File("C:/Users/HHYJ/Desktop/"//写入的位置,从相册中选择的图片没有后缀，需要自己处理下
                                                                + fileItem.getName());
                                                InputStream ins = fileItem.getInputStream();
                                                OutputStream ous = new FileOutputStream(file1);
                                               try {
                                                        byte[] buffer = new byte[1024];
                                                        int len = 0;
                                                        while ((len = ins.read(buffer)) > -1) {
                                                                ous.write(buffer, 0, len);                                                        
                                                              }
                                                    } finally {
                                                        ous.close();
                                                        ins.close();

                                                }
                                        }
                                }
                        }
                } catch (FileUploadException e) {
                        e.printStackTrace();
                }
        }

when-master.zip (148.82 KB, 下载次数: 7123)

2015-2-3 16:50 上传

点击文件名下载附件
使用3.1版做了个简单例子： 拍照上传.rar (12.78 KB, 下载次数: 7756)

2015-3-25 14:11 上传

点击文件名下载附件
升级版（增加上传后页面显示，注意配置web.xml文件）
图片上传.rar (22.14 KB, 下载次数: 8042)

2015-4-9 10:54 上传

点击文件名下载附件

sakawinki

我擦！问题竟然出在iphone上phonegap拍出来的相片像素太高，我的服务器限制4m，他quality在50的时候是6m多的图片。。。现在问题又变成了怎么处理像素的问题。。。如何能降低拍摄的像素呢》？我把quality设置到20，是3m多的图。但我希望是500k左右的图片就够用。苦恼！android还没试，万一其他系统或者手机像素不行，这个quality设置又太小了。。。看来相片上传是个大学问啊。。。

zhaixin

js方法uploadImage 不完整

暗夜的忧伤

zhaixin 发表于 2015-2-3 16:17
js方法uploadImage 不完整

使用代码行保存总是丢失

james2

截图，然后，上传代码的压缩包，求共享呀，大神。

暗夜的忧伤

james2 发表于 2015-3-24 19:07
截图，然后，上传代码的压缩包，求共享呀，大神。

基于3.1的demo已上传

hnytkeok

暗夜的忧伤 是高手。谢谢了。

sakawinki

请问3.1的这个还需要用when吗》？好像也没有包含when的js 啊。而且试过之后发现提示：
navigator.notification.progressStart 未定义啊。这个navigator应该是cordova里面的吧》？

暗夜的忧伤

sakawinki 发表于 2015-4-1 09:26
请问3.1的这个还需要用when吗》？好像也没有包含when的js 啊。而且试过之后发现提示：
navigator.notificat ...

实际上3.1的都不需要了好像

sakawinki

我看您注释了deferred  定义。可是后面您又用到了deferred  。3.1编译啥的没错。
就是ios手机实际运行总是提示navigator.notification.progressStart未定义