首页 » HTML5 » html5规定数量手机拍照、选择相册照片base64编码上传

html5规定数量手机拍照、选择相册照片base64编码上传

原文 http://blog.csdn.net/zh854663752/article/details/77429458

2017-08-20 18:20:06阅读(610)

转载一部分。自己写了一部分。


由于进来公司根据公司产品重写之前用mui开发的APP,需要加一个手机上传照片功能,无奈没有经验故上网查找。

找到一个前端的例子,地址:点击打开链接

地址中可以下载前端部分的一个demo项目,如地址丢失或文件无法下载,可以联系我。


之前没有接触过base64解码编码,这里特指上传图片。如果没了解过,可以随便了解一下即可。


前面已经说了前端部分,这里放一下后台。

实体类:

public class W_m_pic {
	private String pic;
	public String getPic() {
		return pic;
	}
	public void setPic(String pic) {
		this.pic = pic;
	}
}
Controller:

package com.app.mobile.controller;
import java.beans.IntrospectionException;
import java.io.ByteArrayInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.text.ParseException;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.codec.binary.Base64;
import org.codehaus.jackson.JsonParseException;
import org.codehaus.jackson.map.JsonMappingException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.app.base.dto.GridRequestDto;
import com.app.base.model.W_m_pic;
import com.app.publicmethod.MapperFactory;
@Controller
@RequestMapping("/mobile/upload")
public class UploadController {
	
	@SuppressWarnings({ "static-access", "unchecked" })
	@RequestMapping(value = "/image.do", method = RequestMethod.POST)
	public @ResponseBody
	Map<String, Object>  base64Img(GridRequestDto dto,HttpServletRequest request,HttpServletResponse response) throws JsonParseException, JsonMappingException, IOException, IllegalAccessException, InstantiationException, InvocationTargetException, IntrospectionException, ClassNotFoundException, ParseException {
		response.setHeader("Access-Control-Allow-Origin", "*");
		Map<String, Object> rmap = new HashMap<String, Object>();
		String base64Code = request.getParameter("imgDatas");
		/*
		中间这部分代码是将从前端传过来的JSON格式的图片地址,前面说了是可以上传指定数量的照片,所以当一个集合处理,
		这里工具类的作用是将JSON转换成指定对象类型的对象集合。
		该工具类的具体实现方式可以去网上搜索一下,不难理解。
		*/
		List<W_m_pic> itemlist = (List<W_m_pic>)  MapperFactory.getInstance().convertStr3Bean(base64Code, W_m_pic.class);
		if(itemlist.size()<=0){
            rmap.put("status", false);
            rmap.put("message", "请选择图片!");
            return rmap;
        }else{
        	for(W_m_pic pic : itemlist){
        		String fileName = "C:\\Users\\zhang\\Desktop\\"+new Date().getTime()+".png";
        		try{
        			Base64 base64 = new Base64();
        			String temppic = pic.getPic().split(",")[1];
        			byte[] bytes = base64.decodeBase64(new String(temppic).getBytes());
        			ByteArrayInputStream in = new ByteArrayInputStream(bytes);
        			byte[] buffer = new byte[1024];
        			FileOutputStream out = new FileOutputStream(fileName);
        			int byteread = 0;
        			while ((byteread = in.read(buffer)) != -1) {
        				out.write(buffer, 0, byteread); // 文件写操作
        				out.flush();
        			}
        			out.close();
        		}catch (Exception e) {
        			rmap.put("status", false);
        			rmap.put("message", "上传失败!");
        			return rmap;
        		}
        	}
        	rmap.put("status", true);
        	rmap.put("message", "上传成功!");
        }
        return rmap;
	}
}



前端基本效果如下:

<a href=html5规定数量手机拍照、选择相册照片base64编码上传" src="http://img.blog.csdn.net/20170820155254940?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemg4NTQ2NjM3NTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">


如果要用,可以稍作修改。



最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹