1.图片上传输入框
<input type="file" name="" class="fileUpload" accept="image/*" capture="camera"/>
2.上面时候触发onchange
$('.fileUpload').on('change', function () {
id = $(this).parent().attr("id");
//上传成功移除file input
$(this).parent().children().remove();
var _this = $(this)[0],
_file = _this.files[0],//里面存放是图片信息
fileType = _file.type;
console.log(_file.size);
if(/image\/\w+/.test(fileType)){
$.showLoading("图片上传中...");
var fileReader = new FileReader();
fileReader.lastModifiedDate = _file.lastModifiedDate
fileReader.name = _file.name
fileReader.readAsDataURL(_file);
fileReader.onload = function(event){
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function(){ //创建一个image对象,给canvas绘制使用
//通过canvas生成base64字符串,后台会解析这个字符串,dataURL是最终生成的字符串
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var c = canvas.getContext("2d");
c.drawImage(this, 0, 0, this.width, this.height);
var dataURL = canvas.toDataURL("image/jpeg");
$.post(ctx + '/base/front/photoInfo/uploadPicture.sy',{ 'file': dataURL, //base64字符串 'fileDate': (typeof (event.target.lastModifiedDate) != 'undefined' ? event.target.lastModifiedDate : new Date()).Format("yyyy-MM-dd hh:mm:ss"),//图片修改时间,通过这个来判断是否是直接拍摄的照片 'fileName': event.target.name//照片名称 },function(data, code){ $.hideLoading(); $.modal({ title: ' ', text: "上传成功!" }); },'json'); } } }else{ $.modal({ title: ' ', text: "请选择图片格式文件!" }); }});
3.后台代码:
1.在Controller或者Action中调用,所需的参数file是上面post请求中所携带的dataURL,即base64字符串。FileUpload是自己写的一个Class,进行处理base64字符串
FileUpload upload = new FileUpload(file.split(",")[1]);
JSONObject jsonObject = upload.uploadFlowFile();//savePath
2.在FileUpload中的方法,下面用到的fileFlow参数是上面new FileUpload时传进的参数
用到的是 sun.misc.BASE64Decoder包
/**
* 方法名称:
* 方法描述:上传文件
* 创建时间:2015-9-29 下午1:39:03
*/
public JSONObject uploadFlowFile() throws Exception{
JSONObject json=new JSONObject();
try {
finishedFlowUpload("uploadPath");
json.put("msg", this.getSavePath());
json.put("fileName", this.getFiledataFileName());
json.put("savePath", this.getSavePath());
json.put("status", true);
} catch (Exception e) {
e.printStackTrace();
json.put("status", false);
}
return json;
}
protected void finishedFlowUpload(String savePathKey) throws Exception {
// 根据服务器的文件保存地址和原文件名创建目录文件全路径
String dstPath = null;
// 保存路径
String bsPath = null;
// 文件类型
String fileType = ".png";
String uuidName = null;
if(null!=savePathKey){
dstPath = ConfigUtil.get(savePathKey);//spring boot配置的保存路径
}
if(null==dstPath||"".equals(dstPath)){
dstPath = ServletActionContext.getServletContext().getRealPath("/");
}
bsPath = "/" + DateUtil.dateToString(DateUtil.getNow(),DateUtil.SYS_DATE_FORMAT) + "/";
File f1 = new File(dstPath+bsPath);
if (!f1.exists()) {
f1.mkdirs();
}
uuidName = UUID.randomUUID().toString();
bsPath = bsPath + uuidName + fileType;
dstPath = dstPath + bsPath;
File dstFile = new File(dstPath);
copyFlow(fileFlow, dstFile);
setSavePath(new ArrayList<String>());
this.getSavePath().add(bsPath);
}
protected static void copyFlow(String fileInputStream, File dst) {
OutputStream out = null;
try {
out = new BufferedOutputStream(new FileOutputStream(dst),
BUFFER_SIZE);
BASE64Decoder base64Decoder = new BASE64Decoder();
byte[] result = base64Decoder.decodeBuffer(fileInputStream);//解码
for (int i = 0; i < result.length; ++i) {
if (result[i] < 0) {// 调整异常数据
result[i] += 256;
}
}
out.write(result);
out.flush();
} catch (Exception e) {
e.printStackTrace();
} finally {
if (null != out) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
参考链接:
change方法来自:https://blog.csdn.net/q814908133/article/details/51746901
通过canvas解析成base64字符串来自:http://www.php.cn/js-tutorial-388776.html
解析base64字符串链接:https://blog.csdn.net/u013476542/article/details/53213783(此链接没有看,是项目中的代码,直接分享出来了,如果想了解可以看一下)