图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个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. 阅读高翔的RGBD-SLAM博文笔记

    目录 高翔的RGBD-SLAM笔记 前端VO: 后端优化 高翔的RGBD-SLAM笔记 RGBD相机的特点: 使用RGBD相机中的深度这一维信息,以及相机的针孔成像模型,相机的内参,可以将二维点恢复成 ...

  2. SQLserver 《深入分析sqlserver 2008》

    PDF版本: 链接:https://pan.baidu.com/s/1bheII-EdyleVJaR5r9lT9Q 提取码:f8zz

  3. 笔试12：Bootstrap知识

    BootStrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. ...

  4. 深入理解defer（上）defer基础

    深入理解 defer 分上下两篇文章,本文为上篇,主要介绍如下内容: 为什么需要 defer: defer 语法及语义: defer 使用要点: defer 语句中的函数到底是在 return 语句之 ...

  5. idea中的插件,可以快速将类中的属性转换成Json字符串

    当我们想要测试接口的时候,难免会根据一个类,一个一个的写json数据,当属性比较少时还行,但当属性多的时候就比较麻烦了, 为了解决这个问题,我们可以安装第三方的插件来快速生成json字符串. 步骤如下 ...

  6. 新建Springboot项目

    软件为sts软件 1.新建项目 2.工程名称 3.选择依赖项,可以在搜索框中搜索 4.添加端口号 5.创建controller 6.创建controller类,并输入一下内容 package com. ...

  7. Cmakelists.txt 的基本框架

    # 执行 cmake . # 表示在当前目录下执行 cmake cmake .. # 表示在前一级目录下执行 cmake make # 在当前目录下执行 make # 语法 #1 设置 cmake 版 ...

  8. 使用element-ui的table组件时，渲染为html格式

    背景 今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式 并没有被识别 原因 在 element-ui 中,table组件默 ...

  9. CSP-S2019游记 执枪的人，一定要做好被杀的觉悟。

    啊,大概是人生中最镇定的三天了. 是了. Day0 教练超级巨,给了我们电话说出去要散养,有事别慌,打电话.身份证丢了别慌,打电话.火车误了别慌,打电话... 然后去了就路上颓颓颓.然后过去试机,打了 ...

  10. A1038 Recover the Smallest Number (30 分)

    一.技术总结 此问题是贪心类问题,给出可能有前导零的数字串,将他们按照某个顺序拼接,使生成的数最小. 解决方案,就是使用cmp函数,因为两两字符串进行拼接,进行排序从小到大. 拼接过后会有0可能出现在 ...