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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jquery replace方法去空格
May 08 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery中event.target和this的区别详解
Aug 13 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
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python Django模板的使用方法
2016/01/14 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python实现抽奖小程序
2020/04/15 Python
python梯度下降算法的实现
2020/02/24 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
护士节活动总结
2014/08/29 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2016年元旦主持词
2015/07/06 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Python实现老照片修复之上色小技巧
2021/10/16 Python