html图片上传java_PhoneGap 上传图片HTML和服务器端端实现(JAVA)
$(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)相关推荐
- 【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...
- java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
- 论坛php 图片上传,Discuz上传图片失败的解决方法
相信使用Discuz的朋友们都遇到过这样的问题,上传文件失败或不显示,包括现在官方论坛里还有很多站长在问这个问题.我以前也遇见过这样的问题,现在将自己的解决方法与大家分享探讨.没有多少技术含量. 1: ...
- upload组件实现图片上传,图片上传,上传图片,上传头像,批量上传图片前后端逻辑
1.主要使用el-ui的upload组件.代码如下,最主要的就是将上传的文件转化为当前的url显示在页面 主要代码如下,基于vue的: <template><div><e ...
- php android 图片上传,android上传图片到PHP的过程详解
这篇文章主要介绍了android上传图片到PHP的过程详解,需要的朋友可以参考下 今天在做上传头像的时候,总是提交连接超时错误,报错信息如下:XXXXXXSokcetTimeOutXXXXXXXX 然 ...
- html图片上传布局,上传图片(压缩图片再上传),布局参考以前的文章(https://www.jianshu.com/p/d379ab1b3eec)...
引入一个js: 百度网盘链接:https://pan.baidu.com/s/1KO9gH4r6bP-foYVAQn5AxQ 提取码:mgcm 复制这段内容后打开百度网盘手机App,操作更方便哦 ht ...
- OCR身份证实名认证+图片上传+拍照上传图片(自用)
chooseImage() {const that = this;Taro.chooseImage({sizeType: ["original", "compressed ...
- php ckeditor 上传图片,CKEditor图片上传的PHP实现
编辑文章是网站后台的常用功能,CKEditor是目前流行的富文本编辑器,它使用方便但要做一些配置才能实现上传本地图片到服务器的功能.在参考了一篇java下CKEditor图片上传的博文后,我用PHP实 ...
- .NET WebAPI 实现图片上传(包括附带参数上传图片)
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...
- kindeditor图片上传
KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...
最新文章
- python测试开发自学教程-python测试开发学习笔记
- xss防御方法base64_XSS 防御方法总结
- RPC 中 参数传递 ImputStream 流会关闭
- ie6不支持png图片的解决办法
- [乐理知识] 第三章 拍子 节拍 节奏
- 基姆拉尔森计算公式(算任意日期是星期几)
- 二月春风似剪刀的上一句是什么,二月春风似剪刀全诗赏析
- Docker学习--基本docker命令
- 51单片机c语言教程第二章,51单片机C语言教程-郭天祥-PDF转word版第二章.pdf
- 实用的技巧之免费下载百度文库VIP文章
- 小眼睛适合大框还是小框眼镜_近视眼镜大镜框好还是小镜框好?
- win系统分区表丢失后如何恢复
- ld cannot find -lbz2
- MP3合并(MP3剪切器V2.0)
- RTI DDS 01
- 计算机二级程序设计提交,程序设计方法与风格(计算机二级复习指导)
- 物联网周刊(第 6 期):开源硬件公司 Adafruit
- echarts 路径图
- “物联网开发实战”学习笔记-(二)手机控制智能电灯
- mysql8.0安装详解