如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件，找了半天没有找到满意的，算了 不找了，自己写一个吧，顺便复习一下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上传图片插件。的更多相关文章
- 给Ionic写一个cordova(PhoneGap)插件
给Ionic写一个cordova(PhoneGap)插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还 ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
- 让我们纯手写一个js继承吧
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
- Skywalking-02：如何写一个Skywalking trace插件
如何写一个Skywalking trace插件 javaagent 原理 美团技术团队-Java 动态调试技术原理及实践 类图 实现 ConsumeMessageConcurrentlyInstrum ...
- 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- 从 0 到 1 到完美，写一个 js 库、node 库、前端组件库
之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonj ...
- 如何手写一个js工具库？同时发布到npm上
自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
随机推荐
- 【BZOJ5502】[GXOI/GZOI2019]与或和（单调栈）
[BZOJ5502][GXOI/GZOI2019]与或和(单调栈) 题面 BZOJ 洛谷 题解 看到位运算就直接拆位,于是问题变成了求有多少个全\(0\)子矩阵和有多少个全\(1\)子矩阵. 这两个操 ...
- 【洛谷P3899】谈笑风生
题目大意:给定一棵 N 个节点的有根树,1 号节点为根节点,现给出 Q 个询问,每次询问距离 u 号节点不超过 K 的节点 b,c 为 a 与 b 的后代,求这样的三元组有多少个. 题解:学会了线段树 ...
- JS学习笔记Day14
一.正则表达式 (一)正则的概念 1.正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去匹配符合规则的字符 (二)创建正则的方式 1.字面量的 ...
- mysql加速导入数据的简单设置
mysql加速导入数据的简单设置 # 修改前查询参数值 show variables like 'foreign_key_checks'; show variables like 'unique_ch ...
- JavaScript 基本类型和引用类型
前言 ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 基本类型 Undefined.Null.B ...
- docker学习-----docker可视化portainer
docker的可视化操作界面portainer 1.创建一个挂载区 docker volume create portainer_data 2.安装( docker run -d - ...
- java(10)类的无参方法
一.变量的作用域(有效的使用范围) 1.变量有2种 1.1成员变量(属性) 声明在类的里面,方法的外面 1.2 局部变量 声明在方法里面或for循环结构中 2.调用时的注意事项(初始值不同.作用域不同 ...
- iTOP-iMX6开发板-Android-can测试例程介绍
TOP-iMX6开发板的 Android 源码的 can 例程包含在 Android 源码中,在“ packages/apps/”目 录下,如下图所示,这个是应用界面的源码. 如下图所示,can ...
- linux磁盘空间满?
磁盘空间满啦 找到项目的logs文件夹 进入logs文件夹,会看到很多access.log*文件. 在Xshell里,输入命令cd 到项目节点的logs文件夹 可能还需要清空下回收站.
- HTTP报错401和403详解及解决办法
一.401: 1. HTTP 401 错误 - 未授权: (Unauthorized) 您的Web服务器认为,客户端发送的 HTTP 数据流是正确的,但进入网址 (URL) 资源 , 需要用户身份验证 ...