项目里面需要一个上传图片的插件，找了半天没有找到满意的，算了 不找了，自己写一个吧，顺便复习一下js方面的知识。完成之后效果还不错，当然还要继续优化，源码在最后。

介绍一种常见的js插件的写法

    ; (function ($, window, document, undefined) {

        })($, window, document, undefined)

这是一种很常见的写法，先说这个开头的 ; 的作用。防止前面上一段scrpit结束的时候没有分号，执行的时候影响到我们定义的脚本。

然后 一个（）包起来的匿名函数，再加上（），等于立刻调用。这么写的步骤

等同于

         function  Upload(a,b,c,d) {

        };
　　Upload($, window, document, undefined)；
 
 即先定义一个函数  Upload，  然后把jquery，window，document，undefined 作为参数执行，

  但是后者的写法等同于谁都能调用 Uplaod 函数，这不是我们想要的 ， 使用（function(){}）()  好处就是外部无法访问问这个函数内部，保证内部不会被污染

下面我们开始实践写一个jquery上传图片插件，一共有三步

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="js/jquery-1.10.2.min.js"></script>

</head>

<body>

    <script>

        ; (function ($, window, document, undefined) {

            //第一步,定义这个函数，也就是咱们要写的插件的主体

            var Upload = function () {

                console.log("hello world")

            };
           //第二步,将Upload赋给window，作为window对象的一个属性
      window.Upload = Upload;
 })(jQuery, window, document, undefined) 

//第三步,开始调用 var upload = new Upload(); 

</script> 
</body> 
</html>

当然，我们做的这个上传图片插件要有一些功能，

1，可以自定义一些属性，比如上传图片的后端地址，上传图片的大小限制，数量限制，等等

2，提供一些可供外部调用的api，比如设置当前的内容，获取当前的内容，等等

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="js/jquery-1.10.2.min.js"></script>

</head>

<body>

    <script>

        ; (function ($, window, document, undefined) {

            //第一步,定义这个函数，也就是咱们要写的插件的主体

            var Upload = function (el, setting) {

                this._default = {

                    maxcount: 5,//默认最大数量5

                    maxsize: 5,//默认图片最大5M

                };

                this._options = $.extend(this._default, setting);//通过$.extend 函数可以让两个对象合并，得到一个新的对象,options来存放配置的属性

                this.getValue = function () {

                    console.log(this._options);

                };

                this.setValue = function (arr) {

                };

            }

            //第二步,将Upload赋给window，作为window对象的一个属性

              window.Upload = Upload;

           })(jQuery, window, document, undefined)

        //第三步,开始调用

        var upload = new Upload({"url":"/tools/upload","maxcount":10});  //创建实例

            upload.getValue()；                    //在外部调用api




</script> </body> </html>




经过反复的修改，终于完成了，附上调用和效果图




<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="css/mini-upload.css" rel="stylesheet" />

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/mini-upload.js"></script>

</head>

<body>

    <!--第一步,创建一个div容器-->

    <div id="test"></div>

    <input type="button" onclick="getvalue()" value="获取当前值" />

    <input type="button" onclick="setvalue()" value="设置当前值" />

    <script>

         //第二步,实例化一个插件对象 

        var upload = new Upload("#test", {

            // data:[], //设置默认的值

            url: "/tools/upload"

        });

        //获取当前插件的值，返回一个数组，是所有图片地址的数组

        function getvalue() {

            console.log(upload.getValue());

        }

            //设置当前的值，返回一个数组，是所有图片地址的数组

        function  setvalue() {

            var arr = ["https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3890934586,2525313398&fm=58&s=37AAF104D22336A5C63010930300C080"

                , "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2420047149,2850547244&fm=58&s=49099B555E23771B16B104F80300C02F"];

            upload.setValue(arr);

        }

    </script>

</body>

</html>






也就200行代码




后端代码




using System;

using System.Collections;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.IO;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Caching;

using System.Web.Mvc;

namespace MiniUpload.Controllers

{

    public enum ResultState

    {

        SUCCESS = ,

        WARNING = ,

        FAIL = ,

        NOTIFY = ,

    }

    public class ToolsController : Controller

    {

        public JsonResult JSON(ResultState state, object data = null, string msg = null)

        {

            JsonResult j = new JsonResult();

            string m = state.ToString();

            if (!string.IsNullOrEmpty(msg))

            {

                m = msg;

            }

            j.Data = new { msg = m, code = (int)state, data = data };

            j.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return j;

        }

        public ActionResult Upload(  )

        {

            try

            {

                int max = ;//5M上限

                string[] allow = new string[] { ".jpg", ".jpeg", ".png", ".jif", ".bmp" };

                if (System.Web.HttpContext.Current.Request.Files.Count > )

                {

                    var file = System.Web.HttpContext.Current.Request.Files[];

                    string fix = file.FileName.Substring(file.FileName.LastIndexOf('.'));

                    if (!allow.Contains(fix.ToLower()))//是图片

                    {

                        return JSON(ResultState.FAIL, null, "不允许的文件类型");

                    }

                    if (file.ContentLength > max**)//最大限制

                    {

                        return JSON(ResultState.FAIL, null, "超出了最大限制 ");

                    }

                    string path = "/UploadFile";

                    string dic = Server.MapPath(path);

                    if (!System.IO.File.Exists(dic))

                    {

                        System.IO.Directory.CreateDirectory(dic);

                    }

                    string filename = path+"/" + Guid.NewGuid().ToString() + fix;

                    file.SaveAs(Server.MapPath(filename));

                    string url = "http://" + System.Web.HttpContext.Current.Request.Url.Authority + filename;

                    return JSON(ResultState.SUCCESS,  url);

                }

                return JSON(ResultState.FAIL, null, "NoFile");

            }

            catch (Exception e)

            {

                return JSON(ResultState.FAIL, e.ToString());

            }

        }

    }

}




实践用起来还行，当然后面还要继续改进


附上 源码地址     https://gitee.com/unclescar/mini-upload
												


											
如何写一个Js上传图片插件。的更多相关文章
	

    
								
  1. 给Ionic写一个cordova(PhoneGap)插件
		
    给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...
    
		
    2. 
						
  2. 用javascript写一个emoji表情插件
		
    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
    
		
    3. 
						
  3. 让我们纯手写一个js继承吧
		
    继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
    
		
    4. 
						
  4. Skywalking-02：如何写一个Skywalking trace插件
		
    如何写一个Skywalking trace插件 javaagent 原理 美团技术团队-Java 动态调试技术原理及实践 类图 实现 ConsumeMessageConcurrentlyInstrum ...
    
		
    5. 
						
  5. 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
		
    需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...
    
		
    6. 
						
  6. 用原生js来写一个swiper滑块插件
		
        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
    
		
    7. 
						
  7. 写一个Vue loading 插件
		
    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
    
		
    8. 
						
  8. 从 0 到 1 到完美，写一个 js 库、node 库、前端组件库
		
    之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonj ...
    
		
    9. 
						
  9. 如何手写一个js工具库？同时发布到npm上
		
    自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. centos2.6.18升级到2.6.39
			
    本来想升级到最新版本4.6的,但是不成功,即使3.4也不成功,暂且先升级到2.x最新版本. 步骤如下: 一 下载源码 https://www.kernel.org/pub/linux/kernel/  ...
    
			
    2. 
						
  2. MySQL_表锁_lock tables tableName read
			
    pre.环境准备 1.建立两个表S,T,并插入一些数据 --创建表S create table S(d int) engine=innodb; ); --创建表T create table T(c i ...
    
			
    3. 
						
  3. GIT-windows系统部署git服务器
			
    windows系统部署git服务器 因为需要所以就来利用IIS(Internet Information Service )来进行搭建. 进入正文: 不管你是什么win7.win8.win8.1还是w ...
    
			
    4. 
						
  4. NOI-OJ 2.2 ID:3089 爬楼梯
			
    整体思路 这是一个典型的递归型问题: 临界点:如果只有1级台阶,有1种走法(一次一步):如果有2级台阶,则有2种走法(一次一步或一次两步) 递归方法,对于n级台阶,如果第一次走1步,还剩n-1级台阶, ...
    
			
    5. 
						
  5. css长度单位学习(em,rem,px,vw,vh)
			
    绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
    
			
    6. 
						
  6. day 18 - 1 正则与 re 模块
			
    正则表达式 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个 “规则字符串”,这个 “规则字符串” 用来表达对字符串的一种过滤逻辑. 我 ...
    
			
    7. 
						
  7. Spring Cloud 2-Feign 声明式服务调用(三)
			
    Spring Cloud Feign  1. pom.xml 2. application.yml 3. Application.java 4. Client.java 简化RestTemplate调 ...
    
			
    8. 
						
  8. NBIOT经典回答【转】
			
    转自:https://blog.csdn.net/pan0755/article/details/70145936 该部分分享的是物联网各垂直应用领域里,NB-IoT技术的部署,看看适合NB-IoT技 ...
    
			
    9. 
						
  9. TCP-IP详解学习笔记1
			
    TCP-IP详解学习笔记1 网关可以在互不相关的网络之间提供翻译功能: 体系结构: 协议和物理实现,实际上是一组设计决策. TCP/IP协议族允许计算机,智能手机,嵌入式设备之间通信: TCP/IP是 ...
    
			
    10. 
						
  10. ie浏览器多开-----同时登陆多个账号
			
    1.在电脑桌面右键 找到 新建快捷方式 在上图输入框中输入 "C:\Program Files\Internet Explorer\iexplore.exe" -noframeme ...
    
			
    11.