前端:
/* 上传图片的方法*/
function actionSheet(){
plus.nativeUI.actionSheet(
{title:"选择上传方式",
cancel:"取消",
buttons:[
{
title:"拍照"
},{
title:"本地上传"
}
]},
function(e){
if(e.index == 1){
captureImage();
}
if(e.index == 2){
galleryImgs();
}
}
);
}
//相机上传
function captureImage(){
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
cmr.captureImage( function( path ){
//alert( "Capture image success: " + path );
var task = plus.uploader.createUpload( url+'/basicDisremake/basicDisremake/fileUpload',
{ method:"POST",blocksize:204800,priority:100 },
function ( t, status ) {
// 上传完成
if ( status == 200 ) {
var data = JSON.parse(t.responseText)
if(data.code == 0){
/* $("#other").val($("#other").val()+","+data.message); */
$('#product').append('<font style="display: flex; flex-wrap: wrap;" size="2">'+data.message+'</font>')
if(headimg === ''){
headimg +=data.message;
}else{
headimg += ','+data.message;
}
}else{
}
} else {
alert( "Upload failed: " + status );
}
}
);
plus.io.resolveLocalFileSystemURL(path, function(entry) {
/* $('#product').text(imgs); */
}, function(e) {
outLine("读取拍照文件错误:" + e.message);
});
task.addFile( path, {key:"file"} );
task.addData( "string_key", "string_value" );
//task.addEventListener( "statechanged", onStateChanged, false );
task.start();
},
function( error ) {
alert( "Capture image failed: " + error.message );
},
{resolution:res,format:fmt}
);
}
function galleryImgs(){
// 从相册中选择图片
plus.gallery.pick( function(e){
for(var i in e.files){
var task = plus.uploader.createUpload( url+'/basicDisremake/basicDisremake/fileUpload',
{ method:"POST",blocksize:204800,priority:100 },
function ( t, status ) {
// 上传完成
if ( status == 200 ) {
var data = JSON.parse(t.responseText);
alert("上传成功");
$('#product').append('<font style="display: flex; flex-wrap: wrap;" size="2">'+data.message+'</font>')
if(data.code == 0){
if(headimg === ''){
headimg +=data.message;
}else{
headimg += ','+data.message;
}
}else{
}
} else {
alert( "Upload failed: " + status );
}
}
);
task.addFile( e.files[i], {key:"file"} );
task.addData( "string_key", "string_value" );
task.start();
console.log(i);
/*图片的回显*/
$('#demo2').append('<img src="'+ e.files[i] +'" width="100%" alt="aaaaa" class="layui-upload-img">')
}
}, function ( e ) {
console.log( "取消选择图片");
},{filter:"image",multiple:true,system:false,maximum:1});
}
后台:
@RequestMapping("/fileUpload")
public Result fileUpload(@RequestParam(value="file",required=false) MultipartFile file){
Result result = new Result();
OutputStream out = null;
InputStream fileInput=null;
try {
String filename = file.getOriginalFilename();
String uuid = UUIDGenerator.generate();
String hzName = filename.substring(filename.lastIndexOf("."));
String path = WEBAPP+uuid+hzName;
file.transferTo(new File(path));
result.setMessage(uuid+hzName);
result.setCode(0);
}catch (Exception e){
result.setCode(1);
e.printStackTrace();
}
return result;
}
前端根据图片名称显示此图片:
html:
<div id="extinfo" class="inputimgbox">
<img src="img/head-2.png">
</div>
JS:
$(".inputimgbox img").attr('src', url+'/basicDisremake/basicDisremake/loadImg/'+文件名);
java:
@RequestMapping("/loadImg/{file}")
public void loadImg(@PathVariable String file, HttpServletResponse response){
FileInputStream fileIs=null;
try {
fileIs = new FileInputStream(WEBAPP+file);
} catch (Exception e) {
//log.error("系统找不到图像文件:"+path+"/"+imgFile);
return;
}
//得到向客户端输出二进制数据的对象
try {
int i=fileIs.available(); //得到文件大小
byte data[]=new byte[i];
fileIs.read(data); //读数据
response.setContentType("image/*"); //设置返回的文件类型
OutputStream outStream=response.getOutputStream();
outStream.write(data); //输出数据
outStream.flush();
outStream.close();
fileIs.close();
} catch (IOException e) {
e.printStackTrace();
}
}