项目里面需要一个上传图片的插件，找了半天没有找到满意的，算了 不找了，自己写一个吧，顺便复习一下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. Hdoj 1517.A Multiplication Game 题解
			
    Problem Description Stan and Ollie play the game of multiplication by multiplying an integer p by on ...
    
			
    2. 
						
  2. FWT快速沃尔什变换学习笔记
			
    FWT快速沃尔什变换学习笔记 1.FWT用来干啥啊 回忆一下多项式的卷积\(C_k=\sum_{i+j=k}A_i*B_j\) 我们可以用\(FFT\)来做. 甚至在一些特殊情况下,我们\(C_k=\ ...
    
			
    3. 
						
  3. python中的装饰器迭代器生成器
			
    装饰器: 定义:本质是函数(装饰其它函数) 为其它函数添加附加功能 原则: 1 不能修改被装饰函数源代码    2 不修改被装饰函数调用方式 实现装饰器知识储备: 1 函数即‘’变量‘’ 2 高阶函数 ...
    
			
    4. 
						
  4. Python统计词频的几种方式
			
    语料 text = """My fellow citizens: I stand here today humbled by the task before us, gr ...
    
			
    5. 
						
  5. idea中的一些快捷键，未完待续......
			
    1.快速查看注释的渲染效果 在keymap中查找“Quick Documentation”并设置自己喜欢的快捷键即可 2.全局搜索 在keymap中查找“Replace in Path”并设置自己喜欢 ...
    
			
    6. 
						
  6. Error creating bean with name
			
    最近在学一个东西,要使用SSM新建一个案例,是这样滴,我有如下 DeptDAO DeptService DeptServiceImpl DeptController Dept Mybatis 首先,我 ...
    
			
    7. 
						
  7. 单例模式的七种实现-Singleton(Java实现)
			
    1. 饿汉式 实现代码: public class Singleton { private Singleton() { } private static Singleton singleton = n ...
    
			
    8. 
						
  8. dpkg用管道批量删除deb
			
    dpkg -l |grep deepin|awk '{print $2}'|xargs sudo dpkg -P
    
			
    9. 
						
  9. mysql普通用户本机无法登录的解决办法
			
    背景 mysql和mariadb的用户表里存在匿名用户时,普通用户出现无法登录的情况 分析 先查看下用户表 mysql> select user, host, password from mys ...
    
			
    10. 
						
  10. SpringBoot系列:Pojo validation
			
    JSR 303 规范了bean validation, Hibernate validator实现了JSR 303所有的规范, 同时也是最常用的validator 工具包. 使用 Hibernate  ...
    
			
    11.