HTML5+调用手机/相册 上传图片及回显_h5 调用本地相册/相机上传图片,并回调

前端：

/* 上传图片的方法*/
	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});
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

后台：

    @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;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

前端根据图片名称显示此图片：
html：

<div id="extinfo" class="inputimgbox">
	<img src="img/head-2.png">
</div>
1
2
3

JS：

$(".inputimgbox img").attr('src', url+'/basicDisremake/basicDisremake/loadImg/'+文件名);
1

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();
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25