图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个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. CRT&EXCRT学习笔记

    非扩展 用于求解线性同余方程组 ,其中模数两两互质 . 先来看一看两个显然的定理: 1.若 x \(\equiv\) 0 (mod p) 且 y \(\equiv\) 0 (mod p) ,则有 x+ ...

  2. 基于图的异常检测（三）：GraphRAD

    基于图的异常检测(三):GraphRAD 风浪 一个快乐的数据玩家/风控/图挖掘 24 人赞同了该文章 论文:<GraphRAD: A Graph-based Risky Account Det ...

  3. vue-cli 3 和 vue-cli 2的区别

    分享文章: 浅谈vue-cli 3 和 vue-cli 2的区别 https://blog.csdn.net/weixin_42080056/article/details/81631661 vue- ...

  4. 201871010104-陈园园 《面向对象程序设计（java）》第六——七周学习总结

    201871010104-陈园园 <面向对象程序设计(java)>第六——七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daiz ...

  5. Netty线程模型（五）

    Netty支持单线程.主线程模型.主从多线程模型. 我们在创建线程组的时候,如果不传递参数,则默认构建的线程组线程是CPU核心数量. 一.单线程模型 在ServerBootstrap调用方法group ...

  6. luoguP3327 [SDOI2015]约数个数和

    题意 首先有个结论: \(d(i,j)=\sum\limits_{x|i}\sum\limits_{y|j}[gcd(x,y)=1]\) 证明: 假设\(i=p_1^{a_1}*p_2^{a_2}*. ...

  7. c# 多线程多个参数

    for (int i = 0; i <count; i++) //根据选择的串口号数量创建对应数量的线程 { thread = new Thread(new ParameterizedThrea ...

  8. Nginx与安全有关的几个配置

    Nginx与安全有关的几个配置 原创: 37丫37 运维咖啡吧 昨天 安全无小事,安全防范从nginx配置做起 上一篇文章<Nginx的几个常用配置和技巧>收到了不错的反馈,这里再总结下n ...

  9. [LeetCode] 926. Flip String to Monotone Increasing 翻转字符串到单调递增

    A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...

  10. [LeetCode] 899. Orderly Queue 有序队列

    A string S of lowercase letters is given.  Then, we may make any number of moves. In each move, we c ...