apicloud app选择手机相册相机图片上传到服务器
效果图是这样的
点击修改头像,会出现选项
apicloud HTML代码
<img src="" id="avatar"/>
<input type="button" value="修改头像" onclick="showAction();"/>
apicloud js代码
<script>
//调用手机相册和相机
var imgSrc="";
function showAction(){
api.actionSheet({
title: '上传头像',
cancelTitle: '取消',
buttons: ['拍照','从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
//获取相机还是相册
function getPicture(sourceType) {
var user=$api.getStorage('username');
if(sourceType==1){ // 拍照
//获取一张图片
api.getPicture({
sourceType: 'camera', //拍照
encodingType: 'png',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
//var imgSrc = ret.base64Data; 如果是base64,要用这个属性获取地址
// 获取拍照数据并处理
if (ret) {
imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
//最后一步
//ajax
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/cim.action',
method: 'post',
data: {
values: {
name: user
},
files: {
file: imgSrc
}
}
},function(ret, err){
if (ret) {
alert("上传成功");
}
});
//ajax
//最后一步
}
}
});
}else if(sourceType==2){ // 从相册中选择
api.getPicture({
sourceType: 'album', //从相册中选择
encodingType: 'jpg',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
// 获取拍照数据并处理
//var imgSrc = ret.base64Data; 如果是base64,要用这个属性获取地址
if (ret) {
imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
//最后一步
//ajax
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/cim.action',
method: 'post',
data: {
values: {
name: user
},
files: {
file: imgSrc
}
}
},function(ret, err){
if (ret) {
alert("上传成功");
}
});
//ajax
//最后一步
}
}
});
}
}
//调用手机相册和相机
//
</script>
后端处理
1、java服务器(ssh框架)
2、接收图片,把图片放在服务器的一个盘的文件里面,因为如果存储在数据库里面,很占内存
3、数据库里面就放一些图片的地址
package cn.com.service;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import com.opensymphony.xwork2.ModelDriven;
import cn.com.bean.User;
import cn.com.tools.RandomStr;
@Repository(value = "copyImage")
@Scope("prototype")
public class CopyImage implements ModelDriven<User>{
@Autowired
private SessionFactory sf;
@Autowired
private User user;
@Override
public User getModel() {
// TODO Auto-generated method stub
return user;
}
private File file;
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
@Transactional
public String GenerateImage(){
//upload_aa00f2d2_bb13_4737_8033_f1394d1b0911_00000000.tmp
System.out.println("文件名:"+file.getName());
//把文件写到里面
String fn=RandomStr.getRandomString(10);
//存储图片的地址
fn="D:/myapp/"+fn+".jpg";
File fl=new File(fn);
FileOutputStream fout=null;
InputStream in=null;
try {
fout=new FileOutputStream(fl);
in=new FileInputStream(file);
byte [] by=new byte[1024];
int length=0;
try {
while((length=in.read(by))>-1){
fout.write(by, 0, length);
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
try {
in.close();
fout.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//图片放在服务器的一个盘里面,因为如果是把图片以流的形式存储在数据库里面,就太占内存了
Session session=sf.getCurrentSession();
String names=user.getUsername();
System.out.println("user:"+names);
String sql="update User set userlogo=? where username=?";
Query query=session.createQuery(sql);
query.setString(0, fn);
query.setString(1, names);
int rr=query.executeUpdate();
String toast="";
if(rr>1){
toast="succcess";
}else{
toast="fail";
}
//图片放在服务器的一个盘里面,因为如果是把图片以流的形式存储在数据库里面,就太占内存了
return null;
}
}