客户端:
<html>
<head>
<title>js本地图片预览,及服务端保存</title>
</head>
<body>
<input type="file" accept="image/*" id="fileChoose" name="fileChoose" οnchange="preview(this)" />
<img id="editImg" style="width:100%;height:100%;"/>
<script type="text/javascript">
var base64img=null;//图片base64编码后的字符串,用于上传到服务器保存图片
function preview(obj) {
var file = obj.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function () {
document.getElementById("editImg").src = this.result;
base64img = this.result;
}
reader.readAsDataURL(file);
}
}
$(function(){
$('#fileChoose').change(function (e) {
var file = $(this)[0].files[0];
if (file) {
var reader = new FileReader();
reader.onload = function () {
//alert(this.result.length);
$("#shareImg").attr('src', this.result);
base64img = this.result;
alert(base64img);
}
reader.readAsDataURL(file);
}
});
});
</script>
</body>
</html>
服务端:
string baseStr = "data:image/jpeg;base64,base64后的内容";
MemoryStream m = new MemoryStream(Convert.FromBase64String(baseStr.Split(',')[1]));
string rootPath = "c:\\img.jpg";
FileStream fs = new FileStream(rootPath, FileMode.OpenOrCreate);
BinaryWriter w = new BinaryWriter(fs);
w.Write(m.ToArray());
fs.Close();
m.Close();
//asp.net 跨域上传文件,服务端设置 HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*");
$.ajax({
url:url,
type:'post',
data:{},
success:function(result){
alert(result);
}
});