PhoneGap_dataTransfer

$(document).bind("mobileinit", function() {

//$.mobile.autoInitialize = false; //删除这行配置参数就会出现渲染错误

$.support.cors = true;

$.mobile.allowCrossDomainPages = true;

});

var pictureSource; // picture source

var destinationType; // sets the format of returned value

// Wait for Cordova to connect with the device

//

document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready to be used!

//

function onDeviceReady() {

pictureSource = navigator.camera.PictureSourceType;

destinationType = navigator.camera.DestinationType;

}

// Called when a photo is successfully retrieved

//

function onPhotoDataSuccess(imageData) {

// Uncomment to view the base64 encoded image data

// console.log(imageData);

// Get image handle

//

var smallImage = document.getElementById('smallImage');

// Unhide image elements

//

smallImage.style.display = 'block';

// Show the captured photo

// The inline CSS rules are used to resize the image

//

//smallImage.src = "data:image/jpeg;base64," + imageData;

smallImage.src = imageData;

}

// Called when a photo is successfully retrieved

//

function onPhotoURISuccess(imageURI) {

// Uncomment to view the image file URI

// console.log(imageURI);

// Get image handle

//

var largeImage = document.getElementById('largeImage');

// Unhide image elements

//

largeImage.style.display = 'block';

// Show the captured photo

// The inline CSS rules are used to resize the image

//

//largeImage.src = "data:image/jpeg;base64," + imageData;

largeImage.src = imageURI;

}

// A button will call this function

//

function capturePhoto() {

// Take picture using device camera and retrieve image as base64-encoded string

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

destinationType : navigator.camera.DestinationType.FILE_URI,//这里要用FILE_URI,才会返回文件的URI地址

//destinationType : Camera.DestinationType.DATA_URL,

sourceType : Camera.PictureSourceType.CAMERA,

allowEdit : true,

encodingType : Camera.EncodingType.JPEG,

popoverOptions : CameraPopoverOptions,

saveToPhotoAlbum : true

});

}

// A button will call this function

//

function capturePhotoEdit() {

// Take picture using device camera, allow edit, and retrieve image as base64-encoded string

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

allowEdit : true,

destinationType : destinationType.DATA_URL,

saveToPhotoAlbum : true

});

}

// A button will call this function

//

function getPhoto(source) {

// Retrieve image file location from specified source

navigator.camera.getPicture(uploadPhoto, onFail, {

quality : 50,

destinationType : destinationType.FILE_URI,//这里要用FILE_URI,才会返回文件的URI地址

sourceType : source

});

}

// Called if something bad happens.

//

function onFail(message) {

alert('Failed because: ' + message);

}

function uploadPhoto(imageURI) {

var options = new FileUploadOptions();

options.fileKey = "fileAddPic";//用于设置参数,对应form表单里控件的name属性,这是关键,废了一天时间,完全是因为这里,这里的参数名字,和表单提交的form对应

options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);

//如果是图片格式,就用image/jpeg,其他文件格式上官网查API

options.mimeType = "image/jpeg";

//options.mimeType = "multipart/form-data";//这两个参数修改了,后台就跟普通表单页面post上传一样 enctype="multipart/form-data"

//这里的uri根据自己的需求设定,是一个接收上传图片的地址

var uri = encodeURI("http://192.168.254.44:8080/MWAPI/phonegap");

//alert(imageURI);

//alert(uri);

options.chunkedMode = false;

/* var params = new Object();

params.fileAddPic = imageURI;

options.params = params; */

var ft = new FileTransfer();

ft.upload(imageURI, uri, win, fail, options);

}

function win(r) {

alert("上传成功");

var response = r.response;

//alert("response = " + response);

//这里的message是自定义的返回值,具体的根据自己的需求而定

var message = eval("(" + r.response + ")").message;

$("#_picFile").val(message);

//alert("message = " + message);

var imageURI = CONSTANT['context'] + message;

//alert("imageURI =" + imageURI);

onPhotoDataSuccess(imageURI);

onPhotoURISuccess(imageURI);

//alert("Code = " + r.responseCode);

//alert("Response = " + r.response);

//alert("Sent = " + r.bytesSent);

//以下是三个默认的返回参数

console.log("Code = " + r.responseCode);

console.log("Response = " + r.response);

console.log("Sent = " + r.bytesSent);

}

function fail(error) {

alert("An error has occurred: Code = " + error.code);

alert("upload error source " + error.source);

alert("upload error target " + error.target);

console.log("upload error source " + error.source);

console.log("upload error target " + error.target);

}

返回

拍照并上传图片

设置

点击拍照

从相册选择图片

从相册选择图片

id="smallImage" src="" />

style="display: none; width: 240px; height: 240px;" id="largeImage"

src="" />

data-icon="plus">底部菜单

data-role="button" data-icon="arrow-u">底部菜单

html图片上传java_PhoneGap 上传图片HTML和服务器端端实现(JAVA)相关推荐

  1. 【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录。

    在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...

  2. java flex 图片上传_flex上传图片到java服务器

    今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...

  3. 论坛php 图片上传,Discuz上传图片失败的解决方法

    相信使用Discuz的朋友们都遇到过这样的问题,上传文件失败或不显示,包括现在官方论坛里还有很多站长在问这个问题.我以前也遇见过这样的问题,现在将自己的解决方法与大家分享探讨.没有多少技术含量. 1: ...

  4. upload组件实现图片上传,图片上传,上传图片,上传头像,批量上传图片前后端逻辑

    1.主要使用el-ui的upload组件.代码如下,最主要的就是将上传的文件转化为当前的url显示在页面 主要代码如下,基于vue的: <template><div><e ...

  5. php android 图片上传,android上传图片到PHP的过程详解

    这篇文章主要介绍了android上传图片到PHP的过程详解,需要的朋友可以参考下 今天在做上传头像的时候,总是提交连接超时错误,报错信息如下:XXXXXXSokcetTimeOutXXXXXXXX 然 ...

  6. html图片上传布局,上传图片(压缩图片再上传),布局参考以前的文章(https://www.jianshu.com/p/d379ab1b3eec)...

    引入一个js: 百度网盘链接:https://pan.baidu.com/s/1KO9gH4r6bP-foYVAQn5AxQ 提取码:mgcm 复制这段内容后打开百度网盘手机App,操作更方便哦 ht ...

  7. OCR身份证实名认证+图片上传+拍照上传图片(自用)

    chooseImage() {const that = this;Taro.chooseImage({sizeType: ["original", "compressed ...

  8. php ckeditor 上传图片,CKEditor图片上传的PHP实现

    编辑文章是网站后台的常用功能,CKEditor是目前流行的富文本编辑器,它使用方便但要做一些配置才能实现上传本地图片到服务器的功能.在参考了一篇java下CKEditor图片上传的博文后,我用PHP实 ...

  9. .NET WebAPI 实现图片上传(包括附带参数上传图片)

    博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...

  10. kindeditor图片上传

    KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...

最新文章

  1. python测试开发自学教程-python测试开发学习笔记
  2. xss防御方法base64_XSS 防御方法总结
  3. RPC 中 参数传递 ImputStream 流会关闭
  4. ie6不支持png图片的解决办法
  5. [乐理知识] 第三章 拍子 节拍 节奏
  6. 基姆拉尔森计算公式(算任意日期是星期几)
  7. 二月春风似剪刀的上一句是什么,二月春风似剪刀全诗赏析
  8. Docker学习--基本docker命令
  9. 51单片机c语言教程第二章,51单片机C语言教程-郭天祥-PDF转word版第二章.pdf
  10. 实用的技巧之免费下载百度文库VIP文章
  11. 小眼睛适合大框还是小框眼镜_近视眼镜大镜框好还是小镜框好?
  12. win系统分区表丢失后如何恢复
  13. ld cannot find -lbz2
  14. MP3合并(MP3剪切器V2.0)
  15. RTI DDS 01
  16. 计算机二级程序设计提交,程序设计方法与风格(计算机二级复习指导)
  17. 物联网周刊(第 6 期):开源硬件公司 Adafruit
  18. echarts 路径图
  19. “物联网开发实战”学习笔记-(二)手机控制智能电灯
  20. mysql8.0安装详解

热门文章

  1. 国内外9大最佳测试管理平台
  2. 数论——Baby Step Giant Step大步小步算法
  3. 【HTML5 基础】HTML5重要内容
  4. 题解 | Guessing ETT-2019牛客暑期多校训练营第三场C题
  5. 有没有能排列待办事项无广告的Windows版便签软件推荐
  6. windows不能更改密码
  7. 图像处理中的一阶偏导数和二阶偏导数
  8. python 回溯法 01背包问题_Python基于回溯法解决01背包问题实例
  9. 行转列 和 链接查询 
  10. LeetCode:714. 买卖股票的最佳时机含手续费(python)