起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 59269|回复: 78

[分享] 手机端拍照上传+显示

  [复制链接]
发表于 2015-2-3 14:09:33 | 显示全部楼层 |阅读模式
本帖最后由 暗夜的忧伤 于 2015-4-9 11:07 编辑

首先需要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, 下载次数: 7053)

评分

参与人数 1 +20 收起 理由
jishuang + 20 赞一个!

查看全部评分

36

主题

94

帖子

190

积分

初级会员

Rank: 2

积分
190
QQ
发表于 2015-4-1 12:24:21 | 显示全部楼层
我擦!问题竟然出在iphone上phonegap拍出来的相片像素太高,我的服务器限制4m,他quality在50的时候是6m多的图片。。。现在问题又变成了怎么处理像素的问题。。。如何能降低拍摄的像素呢》?我把quality设置到20,是3m多的图。但我希望是500k左右的图片就够用。苦恼!android还没试,万一其他系统或者手机像素不行,这个quality设置又太小了。。。看来相片上传是个大学问啊。。。
回复 支持 1 反对 0

使用道具 举报

88

主题

9507

帖子

5135

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5135
QQ
发表于 2015-2-3 16:17:23 | 显示全部楼层
js方法uploadImage 不完整
远程的联系方法 QQ 728094812。添加好友时,需要填写论坛账号
发远程时同时也发一下帖子的地址,方便了解要解决的问题

如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-2-3 17:01:35 | 显示全部楼层
zhaixin 发表于 2015-2-3 16:17
js方法uploadImage 不完整

使用代码行保存总是丢失
回复 支持 反对

使用道具 举报

2

主题

9

帖子

38

积分

新手上路

Rank: 1

积分
38
QQ
发表于 2015-3-24 19:07:46 | 显示全部楼层
截图,然后,上传代码的压缩包,求共享呀,大神。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-25 14:12:24 | 显示全部楼层
james2 发表于 2015-3-24 19:07
截图,然后,上传代码的压缩包,求共享呀,大神。

基于3.1的demo已上传
回复 支持 反对

使用道具 举报

52

主题

209

帖子

482

积分

中级会员

Rank: 3Rank: 3

积分
482
QQ
发表于 2015-3-25 14:22:38 | 显示全部楼层
暗夜的忧伤 是高手。谢谢了。
回复 支持 反对

使用道具 举报

36

主题

94

帖子

190

积分

初级会员

Rank: 2

积分
190
QQ
发表于 2015-4-1 09:26:02 | 显示全部楼层
请问3.1的这个还需要用when吗》?好像也没有包含when的js 啊。而且试过之后发现提示:
navigator.notification.progressStart 未定义啊。这个navigator应该是cordova里面的吧》?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-4-1 09:33:18 | 显示全部楼层
sakawinki 发表于 2015-4-1 09:26
请问3.1的这个还需要用when吗》?好像也没有包含when的js 啊。而且试过之后发现提示:
navigator.notificat ...

实际上3.1的都不需要了好像
回复 支持 反对

使用道具 举报

36

主题

94

帖子

190

积分

初级会员

Rank: 2

积分
190
QQ
发表于 2015-4-1 10:39:30 | 显示全部楼层
我看您注释了deferred  定义。可是后面您又用到了deferred  。3.1编译啥的没错。
就是ios手机实际运行总是提示navigator.notification.progressStart未定义
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 22:24 , Processed in 0.077096 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表