jquery.uploadView 实现图片预览上传

2021-06-06 16:03

阅读:554

YPE html>

标签:xxx   out   技术   height   cto   tap   hmm   func   hang   

图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改

来看代码

@{
    Layout = null;
}

"viewport" content="width=device-width" />
    Index
class="shangchuan">

示例

class="js_uploadBox" style="position: relative">
"preview" class="js_showBox"> "imghead" border="0" src="http://static.neihanhongbao.com/highads/images/nologo.jpg" alt="上传图片" style="width:100px; height:100px" />
"file" name="file" id="id" style="position: absolute; top: 0px; left:0px; height: 100px; filter: alpha(opacity:0); opacity: 0; width: 100px" onclick="Upload()">
"hidden" id="hidTmp_ID" name="Tmp_ID" value="" />

代码前台看起来很简单。

实现的效果也还可以,不过这个保存的是base64的图片,插入数据库的时候我们一般都是保存xxxx.jpg 故需要实现一个方法

 /// 
        /// base64转图片
        /// 
        /// 
        public static string BaseToImg(string baseimg) {
            byte[] bt = Convert.FromBase64String(baseimg.Replace("data:image/jpeg;base64,", ""));
            string filepath = "ImgServer".GetAppsetting();
            string sqlurl = @"" + DateTime.Now.ToString("yyyyMMdd") + "\\";
            string sqlname = "" + DateTime.Now.ToString("yyyyMMddhhmmssmsfff") + ".jpg";
            if (!System.IO.File.Exists(filepath + sqlurl)) {
                System.IO.Directory.CreateDirectory(filepath + sqlurl);
                System.IO.File.WriteAllBytes(filepath + sqlurl + sqlname, bt);
            }
            return sqlurl + sqlname;
        }

这里我是根据日期对文件夹分组了,并且保存到数据库。避免单个文件太大

效果图类似这样

技术分享

 

技术分享

 这个同样也适用于手机上

 

忘了附上下载链接:http://pan.baidu.com/s/1boMcO6j

 

jquery.uploadView 实现图片预览上传

标签:xxx   out   技术   height   cto   tap   hmm   func   hang   

原文地址:http://www.cnblogs.com/elsons/p/7338341.html

上一篇:jsp中的问题

下一篇:Moment.js时间


评论


亲,登录后才可以留言!