图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个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. mpvue小程序加载不出图片 Failed to load local image resource /images/xx.png

    解决方法: 直接写 /static/img/xx.png(一定要从 "/static" 开始,不要写成 "../../static" ,当然static里面也可 ...

  2. 第17节-BLE安全管理概述

    安全管理是BLE中最复杂的内容,涉及LL层.SM层.GAP层 一.妈妈的担心 1. 白名单: 妈妈说,你只能跟A.B.C这3个好孩子玩:他们打电话给你,你才可以出去玩. A.B.C三人,就在妈妈的“白 ...

  3. 201871010101-陈来弟《面向对象程序设计（java）》第七周学习总结

    201871010101-陈来弟<面向对象程序设计(java)>第七周学习总结 项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/n ...

  4. MySQL数据库 介绍,安装,基本操作

    - 数据库介绍: 1.随意存放在一个文件中的数据,数据的格式千差万别 tank|123 jason:123 sean~123 2.软件开发目录规范 - Project: - conf - bin - ...

  5. 怎么解决禅道启动服务mysqlzt时的端口失败

    打开Windows任务管理器 查看服务是否有MySQL正在运行,停止服务 启动mysqlzt服务 重新启动禅道

  6. 洛谷 P3998 [SHOI2013]发微博

    洛谷 P3998 [SHOI2013]发微博 洛谷传送门 题目描述 刚开通的 SH 微博共有n个用户(1Ln标号),在这短短一个月的时间内, 用户们活动频繁,共有m 条按时间顺序的记录: ! x 表示 ...

  7. Linux作为l2tp client 连接l2tp server

    cat /etc/xl2tpd/xl2tpd.conf [global] debug tunnel = yes [lac name] lns = xxx.xxx.xxx.xxx pppoptfile ...

  8. tornado模板的使用

    一. 配置模板路径 settings中使用template_path来指定模板的路径, 实例化服务对象时加载进去即可. 二. 模板的使用 1. 使用self.render()方法可返回指定的html页 ...

  9. ASP.NET开发实战——（一）开篇-用VS创建一个ASP.NET Web程序

        本文是本系列文章第一篇,主要通过建立一个默认ASP.NET MVC项目来引出与ASP.NET MVC相关的功能,由于ASP.NET MVC一个简单的模板就具备了数据库操作.身份验证.输入数据校 ...

  10. 8.19 NOIP模拟测试26(B) 嚎叫响彻在贪婪的厂房+主仆见证了 Hobo 的离别+征途堆积出友情的永恒

    T1 嚎叫响彻在贪婪的厂房 以前做过一个等比数列的题「序列」,这个类似 是等差数列且公差不为1的条件就是各项差的绝对值的$gcd!=1$,每次拿出序列前两个数,求出差值,插入到set里,每次向后扩展, ...