图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个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="" 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: '', //预览图片的宽度，单位px

            height: '', //预览图片的高度，单位px

            allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型

            maxSize:, //允许上传图片的最大尺寸，单位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;

        }

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

效果图类似这样

这个同样也适用于手机上

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

jquery.uploadView 实现图片预览上传的更多相关文章

  1. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  2. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  3. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  4. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  6. 【javascrpt】——图片预览和上传，兼容IE 9-

    下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader. ...

  7. webform的原生操作图片预览和上传

    1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...

  8. jQuery PC端图片预览，鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MUI 单个图片上传预览（拍照+系统相册）：先选择->预览->上传提交

    1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. 其他综合-CentOS7 安装 Jumpserver 跳板机

    CentOS7 安装 Jumpserver 跳板机 1.实验描述 搭建 jumpserver 平台,实现有效的运维安全审计.完美做到事先防范,事中控制和事后溯源 2.实验环境 物理机系统:Window ...

  2. PoI 3.17 已过时代码对比

    PoI 3.17 已过时代码对比颜色定义变化旧版本 : HSSFColor.BLACK.index新版本 : IndexedColors.BLACK.index 获取单元格格式旧版本 : cell.g ...

  3. Spring服务发现和注册

  4. Mysql对表中 数据 查询的操作 DQL

    准备数据,倒入sql文件 运行sql文件 得到四张表 select * from 表名  * 代表全部 1.AS子句作为别名 select studentname as "姓名" ...

  5. Install docker to Redhat 7

    1)   sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 2) s ...

  6. 11/4 <LinkedList>

    82. Remove Duplicates from Sorted List II 跳过重复节点,返回head. class Solution { public ListNode deleteDupl ...

  7. 知识点总结 REACT

    1.react中如何创建一个组件 ES6:class 组件名 extends Component{} ES5:var App=React.createClass({}) 2.render函数什么时候会 ...

  8. 洛谷P4593 [TJOI2018]教科书般的亵渎

    小豆喜欢玩游戏,现在他在玩一个游戏遇到这样的场面,每个怪的血量为\(a_i\)​,且每个怪物血量均不相同,小豆手里有无限张"亵渎".亵渎的效果是对所有的怪造成\(1\)点伤害,如果 ...

  9. 前端Vue项目——首页/课程页面开发及Axios请求

    一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容 ...

  10. c++性能测试工具：计算时间复杂度

    有时候除了测量算法的具体性能指数,我们也会希望测试出算法的时间复杂度,以便我们对待测试的算法的性能有一个更加直观的了解. 测量时间复杂度 google benchmark已经为我们提供了类似的功能,而 ...