图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个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. Linux CentOs基本命令

    基本操作(命令模式下) yy --复制光标所在行 nyy --n为数字,复制光标所在向下n行 p --粘贴到光标的下一行 P --贴在光标的上一行 G --光标移到文件末尾 gg --光标移到文件头 ...

  2. Ubuntu下部署Portainer管理docker

    在上一篇文章中,我们部署了Shipyard来管理docker集群,总体比较简单,而且Shipyard界面风格很简约,还是比较喜欢的,但是正如提出的node节点无法显示bug,以及该项目早已停止维护,让 ...

  3. c# 第19节 Arraylist数组

    本节内容: 1:ArrayList是什么 2:ArrayList数组的添加 3:ArrayList的方法 4:ArrayList 的删除 4:ArrayList 的遍历与查找 1:ArrayList是 ...

  4. 201871010112-梁丽珍《面向对象程序设计（java）》第二周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  5. appium 爬取抖音

    1.MongoDB.py import pymongo from pymongo.collection import Collection client = pymongo.MongoClient(h ...

  6. vs在matlab生成的dll中，load treebigger错误

    提示的错误:Warning: Variable 'model' originally saved as a TreeBagger cannot be instantiated as an object ...

  7. Day01 确定选题

    一起来选题 一.谁想个选题? 今天是第一节大软课,大家需要进行分组和确定选题.分组固然是快乐的,但是确定选题是让人费脑筋的.要新颖!要有需求!要我们能实现(笑)......大家面面相觑.面对这种情况, ...

  8. day 22

    Creativity requires the courage to let go of certainties. 创新需要勇气承担不确定性.

  9. [LeetCode] 902. Numbers At Most N Given Digit Set 最大为 N 的数字组合

    We have a sorted set of digits D, a non-empty subset of {'1','2','3','4','5','6','7','8','9'}.  (Not ...

  10. [LeetCode] 370. Range Addition 范围相加

    Assume you have an array of length n initialized with all 0's and are given k update operations. Eac ...