js本地图片预览，及服务端保存

来源：互联网发布：中介者模式 java 编辑：程序博客网时间：2024/05/16 12:38

客户端：

<html><head>    <title>js本地图片预览，及服务端保存</title></head><body>    <input type="file" accept="image/*" id="fileChoose" name="fileChoose" onchange="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);
}
});

0 0