版权声明:博客知识产权来源命运的信徒,切勿侵权 https://blog.csdn.net/qq_37591637/article/details/89001606
前提:
1、APIcloud做前端开发工具
2、加入了UIMediaScanner模块
代码使用安卓系统,ios系统的可以参考一下
代码讲解
1、UIMediaScanner模块选择多张图片以后,返回的是一个list集合
2、而路径是在list集合的path属性里面
3、因此,需要先获取ret.list里面的内容
var imgs = ret.list;
4、imgs 的格式如下
[{"path":"/storage/emulated/0/DCIM/Camera/p-113474e0.jpg"},{"path":"/storage/emulated/0/DCIM/Camera/p-113474e0.jpg"......}]
5、因此我们需要获取path的值,把这些值放在一个新的数组里面或者覆盖之前的数组数据
for (var i = 0; i < imgs.length; i++) {
ipath[i]=imgs[i].path;
}
6、通过ajax把文件数组传到后台
files: {
"file":ipath
}
注意如果后台是php的话,为"file[]":ipath;(原因问做这个模块的人)
ipath正确的格式如下
正确的如下
错误的如下,失之毫厘差之千里
完整的前端代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>一次上传多张图片</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<body>
<button onclick="getp()">多个文件的上传</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
function getp(){
var UIMediaScanner = api.require('UIMediaScanner');
UIMediaScanner.open({
type: 'picture',
column: 4,
classify: true,
max: 4,
sort: {
key: 'time',
order: 'desc'
},
texts: {
stateText: '已选择*项',
cancelText: '取消',
finishText: '完成'
},
styles: {
bg: '#fff',
mark: {
icon: '',
position: 'bottom_left',
size: 20
},
nav: {
bg: '#eee',
stateColor: '#000',
stateSize: 18,
cancelBg: 'rgba(0,0,0,0)',
cancelColor: '#000',
cancelSize: 18,
finishBg: 'rgba(0,0,0,0)',
finishColor: '#000',
finishSize: 18
}
},
scrollToBottom: {
intervalTime: 3,
anim: true
},
exchange: true,
rotation: true
}, function(ret) {
if (ret) {
var imgs = ret.list;
var ipath=new Array();
for (var i = 0; i < imgs.length; i++) {
ipath[i]=imgs[i].path;
}
alert(ipath);
morefile(ipath);
}
});
}
function morefile(ipath){
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/pg.action',
method: 'post',
data: {
values:{
good_name:'软胶囊'
},
files: {
"file":ipath
}
}
},function(ret, err){
if (ret) {
alert( JSON.stringify( ret ) );
} else {
alert( JSON.stringify( err ) );
}
});
}
</script>
</html>
后端也用数组接收文件
本人用的是java做后台服务器,采用的是ssh框架
ssh框架配置就省略了,直接上关键的代码
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 java.util.List;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
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.Goods;
import cn.com.tools.RandomStr;
@Repository(value = "publishGoods")
@Scope("prototype")
public class PublishGoods implements ModelDriven<Goods> {
@Autowired
private SessionFactory sf;
@Autowired
private Goods goods;
//上传文件
private File[] file;
public File[] getFile() {
return file;
}
public void setFile(File[] file) {
this.file = file;
}
//存储在服务器上面的位置
String dis="D:/myapp/";
//存储在数据库里面的外部链接的代码
String purl="http://47.93.217.112:8080/logo/";
// 宝贝上架(添加)
@Transactional
public String pgoods(){
int len=file.length;
System.out.println("文件接收的个数:"+len);
//给集合里面的每一个文件拷贝赋值
String [] imgs=new String[len];
//把文件写到里面
FileOutputStream fout=null;
InputStream in=null;
for (int i = 0; i < len; i++) {
String fn=RandomStr.getRandomString(10);
//存储图片的地址
String cfn=dis+fn+".jpg";
imgs[i]=purl+fn+".jpg";
File fl=new File(cfn);
try {
fout=new FileOutputStream(fl);
in=new FileInputStream(file[i]);
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();
}
}
for (int i = 0; i < imgs.length; i++) {
System.out.println(imgs[i]);
}
// 打开线程安全的session对象
Session session = sf.getCurrentSession();
goods.setGoods_imgs(imgs);
// 创建对象
session.save(goods);
//范湖数据
HttpServletResponse response = ServletActionContext.getResponse();
JSONObject json = new JSONObject();
json.put("tom", "succ");
try {
response.getWriter().write(json.toString());
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
try {
in.close();
fout.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return null;
}
@Override
public Goods getModel() {
// TODO Auto-generated method stub
return goods;
}
}
完成以后,手机上上传的多张图片在电脑的指定的文件夹里面
数据库的效果如下(数组属性的映射)
写博客的初衷,是做一个电子笔记,方便自己查阅,也为大家做一个参考!
喜欢我就关注我把