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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
Jquery Fade用法详解
Nov 06 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 魔术函数使用说明
2010/05/14 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
python查找第k小元素代码分享
2013/12/18 Python
python去掉字符串中重复字符的方法
2014/02/27 Python
python结合API实现即时天气信息
2016/01/19 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
python 队列详解及实例代码
2016/10/18 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python 实现识别图片上的数字
2019/07/30 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
美国最大点评网站:Yelp
2018/02/14 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
房地产还款计划书
2014/01/10 职场文书
主持词开场白
2014/03/17 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
责任书格式范文
2014/07/28 职场文书
党校毕业心得体会
2014/09/13 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Mysql中常用的join连接方式
2022/05/11 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL