phonegap 拍照或者选择图片上传+ 后台接收图片和参数代码

最新推荐文章于 2023-04-10 23:13:14 发布

mfc2003

最新推荐文章于 2023-04-10 23:13:14 发布

阅读量1.7w

点赞数

本文链接：https://blog.csdn.net/mfc2003/article/details/19400875

版权

1 phonegap 提供CAMERA 调用摄像头，提供FileTransfer和 upload函数上传，支持图片和表单数据

有个疑问是：如果是选择图片上传，获取的地址是 content://media/external/images/media/ ，而且后缀名，必须在 option里设置 targetWidth 和targetHeight 才能显示正常地址

而且，后面会变成 resize?jpg文件名

看代码

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link href="../jquerymobile1.4.0/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css">

<body>

var picUrl="";
function capturePhotoUrl() {

$("#returnpic").css('display','none');
$("#returninfo").css('display','none');

            navigator.camera.getPicture(onPhotoUrlSuccess, onUrlFail,
                    { quality: 50, allowEdit: true,
                        destinationType: Camera.DestinationType.FILE_URI,
                        targetWidth:400, //生成的图片大小单位像素
                        targetHeight:320});

}

function onPhotoUrlSuccess(imageURI) {

            picUrl=imageURI;
            $("#urlimage").css('display','block');
            $("#urlimage").attr('src',picUrl);

$("#urlinfo").css('display','block');
$("#urlinfo").text( "图片的原始路径" + picUrl);

}

function onUrlFail(message) {
alert('调用图片出错，错误信息: ' + message);

}

        function getPhoto1() {
            $("#returnpic").css('display','none');
            $("#returninfo").css('display','none');

            navigator.camera.getPicture(onPhotoUrlSuccess2, onUrlFail,
                    {   sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM ,
                        destinationType:Camera.DestinationType.FILE_URI,
                        encodingType:Camera.EncodingType.JPEG,
                        mediaType:Camera.MediaType.PICTURE,
                        targetWidth:400, //生成的图片大小单位像素，选择图片的时候一定要制定这个值，否则
                        targetHeight:320 //从手机里选好图片后，显示的地址会为: content://media/external/images/media/文件名而且没有后缀变态！

});

}

function onPhotoUrlSuccess2(imageURI) {

            picUrl=imageURI+".jpg";
            $("#urlimage").css('display','block');
            $("#urlimage").attr('src',picUrl);
            $("#urlinfo").css('display','block');
            $("#urlinfo").text( "图片的原始路径" + picUrl);

            var imageURI2 = $("#urlimage").attr("src");
            $("#urlinfo").text("临时路径"+imageURI2);
        }

        function uploadPhoto( ) {
             var options = new FileUploadOptions();
             options.fileKey="file";
             options.fileName=picUrl.substr(picUrl.lastIndexOf('/')+1);
             options.mimeType="image/jpeg";

             var params = new Object();
             params.value1 = "参数1的值哦";
             params.value2 = "参数2的值";
             options.params = params;

             var ft = new FileTransfer();
           /* ft.upload(picUrl, "http://117.40.138.121:520/zms/servlet/Upload", win, fail, options);*/
            ft.upload(picUrl, "http://117.40.138.121:520/zms/servlet/phonegapUp", win, fail, options);
        }

function win(r) {

$("#returnpic").css('display','block');
$("#returninfo").css('display','block');

            $("#urlimage").css('display','none');
            $("#urlinfo").css('display','none');
            $("#returnpic").attr("src","http://117.40.138.121:520/zms/files/"+ r.response);

$("#returninfo").html("上传成功\n：反馈的信息:r.responseCode:"+r.responseCode+"\nr.response:"+r.response+"\nr.bytesSent:"+r.bytesSent);
}

function fail(error) {

$("#returninfo").css('display','block');

         /*
           FileTransferError.FILE_NOT_FOUND_ERR：1 文件未找到错误。
          •FileTransferError.INVALID_URL_ERR：2 无效的URL错误。
          •FileTransferError.CONNECTION_ERR：3 连接错误。
          FileTransferError.ABORT_ERR = 4; 程序异常
          */
            var errorcode=error.code;
            var errstr="";
            switch (errorcode)
            {
                case 1:
                {
                   errstr="错误代码1：源文件路径异常，请重新选择或者拍照上传！";
                    break;
                }
                case 2:
                {
                    errstr="错误代码2:目标地址无效,请重试！";
                    break;
                }
                case 3:
                {
                    errstr="您手机或者后台服务器网络异常,请重新上传！";
                    break;
                }
                default :
                {
                    errstr="程序出错";
                    break;
                }

            }
            $("#returninfo").text("上传失败,错误代码:"+errstr+"上传源文件:"+error.source+"目标地址:"+error.target+"请重新上传！")
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }

</script>
    <div data-role="header">
        <h1>摄像头使用</h1>
        
    </div>

        <div style="width: 98%;margin: 0 auto; text-align: center">
            <a href="#" class=" ui-btn ui-btn-inline" οnclick="capturePhotoUrl()">调用摄像头 </a>
            <a href="#" class=" ui-btn ui-btn-inline" οnclick="getPhoto1()">调用相册 </a>

</div>

</div>

</body>

</html>

2 后台服务器代码很多人写上传都没提供后台代码太不给力了

我的后台代码会吧上传的文件名根据时间修改文件名，防止不同人员上传统一文件名图片导致上传失败

public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        Date date = new Date();//获取当前时间
        SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
        //SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
        String newfileName = sdfFileName.format(date);//文件名称
        String fileRealPath = "";//文件存放真实地址

        String firstFileName="";

        // 获得容器中上传文件夹所在的物理路径    如果按日期存放，则可以在files\\后面继续加 sdFolder+"\\"
        String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "files\\";


        File file = new File(savePath);
        if (!file.isDirectory()) {
            file.mkdirs();
        }

        try {
            DiskFileItemFactory fac = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(fac);
            upload.setHeaderEncoding("UTF-8");
            // 获取多个上传文件
            List fileList = fileList = upload.parseRequest(request);
            // 遍历上传文件写入磁盘
            Iterator it = fileList.iterator();
            while (it.hasNext()) {
            FileItem obit = (FileItem)it.next();
                //如果是普通表单参数

                if(obit.isFormField()){ //普通域,获取页面参数
                    String field = obit.getFieldName();

                 if(field.equals("value1"))
                 {
                System.out.println(obit.getString("UTF-8"));

                 }
                 else if(field.equals("value2")){

                System.out.println(obit.getString("UTF-8"));

                 }
                }
                // 如果是多媒体

                if(obit instanceof DiskFileItem){
                    DiskFileItem item = (DiskFileItem) obit;
                    // 如果item是文件上传表单域
                    // 获得文件名及路径
                    String fileName = item.getName();
                    if (fileName != null) {
                        firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
                        String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
                        fileRealPath = savePath + newfileName + formatName;//文件存放真实地址

                        BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
                        BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
                        Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
                        //上传成功，
                        if (new File(fileRealPath).exists()) {



                            System.out.println("上传成功了，您还可以做其他操作");


                            response.getWriter().write(fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1));
                        }

                    }
                }
            }
        } catch (org.apache.commons.fileupload.FileUploadException ex) {
           ex.printStackTrace();
           System.out.println("没有上传文件");
           return;
        }
     /* response.getWriter().write("1");    */
}

mfc2003

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
10
评论
phonegap 拍照或者选择图片上传+ 后台接收图片和参数代码

1 phonegap 提供CAMERA 调用摄像头，提供FileTransfer和 upload函数上传，支持图片和表单数据有个疑问是：如果是选择图片上传，获取的地址是 content://media/external/images/media/ ，而且后缀名，必须在 option里设置 targetWidth 和targetHeight 才能显示正常地址而且，后面
复制链接

扫一扫