jquery.uploadView 实现图片预览上传功能


Posted in jQuery onAugust 10, 2017

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

来看代码

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <script src="~/Scripts/jquery-1.8.2.min.js"></script>
 <script src="~/Scripts/jquery.uploadView.js"></script>
</head>
<body>
 <div>
  <div class="shangchuan">
   <h4>示例</h4>
   <div class="js_uploadBox" style="position: relative">
    <div id="preview" class="js_showBox">
     <img id="imghead" border="0" src="http://static.neihanhongbao.com/highads/images/nologo.jpg" alt="上传图片" style="width:100px; height:100px" />
    </div>
    <input type="file" name="file" id="id" style="position: absolute; top: 0px; left:0px; height: 100px; filter: alpha(opacity:0); opacity: 0; width: 100px" onclick="Upload()">
   </div>
   <input type="hidden" id="hidTmp_ID" name="Tmp_ID" value="" />
  </div>
 </div>
</body>
</html>
<script type="text/javascript">
 function Upload() {
  $("#id").uploadView({
   uploadBox: '.js_uploadBox',//设置上传框容器
   showBox: '.js_showBox',//设置显示预览图片的容器
   width: '100', //预览图片的宽度,单位px
   height: '100', //预览图片的高度,单位px
   allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
   maxSize:1, //允许上传图片的最大尺寸,单位M
   success: function (e) {
    var l = $(".js_showBox img").attr("src");
    $("#hidTmp_ID").val(l);
   }
  });
 }
</script>

代码前台看起来很简单。

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

/// <summary>
  /// base64转图片
  /// </summary>
  /// <returns></returns>
  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;
  }

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

效果图类似这样

jquery.uploadView 实现图片预览上传功能

jquery.uploadView 实现图片预览上传功能 

这个同样也适用于手机上

总结

以上所述是小编给大家介绍的jquery.uploadView 实现图片预览上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery图片放大镜效果
Jun 23 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP实现服务器状态监控的方法
2014/12/09 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
平面设计的岗位职责
2013/11/08 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
警察群众路线整改措施
2014/09/26 职场文书
实习计划书范文
2015/01/16 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle