<!DOCTYPE HTML PUBLIC>
<html>
<head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title>html5 FileReader</title>
<style type="text/css">
body{margin: 0px; background:#f2f2f0;}
p{margin:0px;}
.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}
.file{position:absolute; width:100%; font-size:90px;}
.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}
.filebtn:hover{background:#04bc0d;}
.showimg{margin:10px auto 10px auto; text-align:center;}
</style>
<script type="text/javascript">
window.onload = function(){
// 选择图片
document.getElementById('img').onchange = function(){
var img = event.target.files[0];
// 判断是否图片
if(!img){
return ;
}
// 判断图片格式
if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){
alert('图片只能是jpg,gif,png');
return ;
}
var reader = new FileReader();
reader.readAsDataURL(img);
reader.onload = function(e){ // reader onload start e.target.result
$.post("http://192.168.0.197:8080/RuyTonWeb/fileReceive.do", {img:e.target.result},function(ret){
if(ret.img!=""){
$('#showimg').html('<img src="' + ret.img+ '">');
}else{
alert('upload fail');
}
},'json');
} // reader onload end
}
}
</script>
</head>
<body>
<p class="title">html5 FileReader(not iframe)</p>
<p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">select image</label></p>
<p class="showimg" id="showimg"></p>
</body>
</html>
package com.ryt.web.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.durcframework.core.MessageResult;
import org.durcframework.core.controller.BaseController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
@Controller
public class FileTest extends BaseController{
@RequestMapping("fileReceive.do")
public @ResponseBody Map<String, String> fileReceive(String img) {
Map<String,String> map=new HashMap<String, String>();
byte[] decoderBytes= this.decodeBase64DataURIScheme(img);
this.writeFile(decoderBytes);
String encodeBytes=encodeBase64DataURIScheme(decoderBytes);
map.put("img",encodeBytes);
return map;
}
private String encodeBase64DataURIScheme(byte[] dataImg) {
BASE64Encoder encoder = new BASE64Encoder();
StringBuilder sb = new StringBuilder();
sb.append("data:image/png;base64,");
sb.append(encoder.encode(dataImg));
return sb.toString();
}
private byte[] decodeBase64DataURIScheme(String dataURI) {
BASE64Decoder decoder = new BASE64Decoder();
byte[] decoderBytes = null;
try {
//去除Data URI scheme头信息 "data:image/jpeg;base64,"
String encodingPrefix = "base64,";
int contentStartIndex = dataURI.indexOf(encodingPrefix) + encodingPrefix.length();
String img= dataURI.substring(contentStartIndex);
decoderBytes = decoder.decodeBuffer(img);
return decoderBytes;
} catch (IOException e) {
e.printStackTrace();
return decoderBytes;
}
}
private void writeFile(byte[] decoderBytes){
try {
FileOutputStream write = new FileOutputStream(new File("D:\\a.jpg"));
write.write(decoderBytes);
write.flush();
write.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}