jQuery插件实现文件上传功能（支持拖拽）(jquery插件开发方法)

编辑：rootadmin

推荐整理分享jQuery插件实现文件上传功能（支持拖拽）(jquery插件开发方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery 插件写法,jquery 文档编辑器插件,jquery插件使用教程,jquery 插件编写,jquery插件使用教程,jquery插件使用教程,jquery 插件编写,jquery 插件编写,内容如对您有帮助，希望把文章链接给更多的朋友！

先贴上源代码地址，点击获取。然后直接进入主题啦，当然，如果你觉得我有哪里写的不对或者欠妥的地方，欢迎留言指出。在附上一些代码之前，我们还是先来了解下，上传文件的时候需要利用的一些必要的知识。

首先我们要说的就是FileReader对象，这是一个HTML5提出的，专门用来异步的读取用户计算机上文件的对象，这里有详细的介绍。所以如果我们想要使用它，那么首先我们得先创建一个FileReader对象。 var fr = new FileReader()

1、这个对象拥有五个方法：

下面附上一个例子：

效果图：

其他的几个方法也基本上大同小异，所以在这里就不做过多解释了。

2、这个对象还拥有三个状态常量：

3、这个对象还拥有三个属性：

4、6个事件处理程序：

这里我们再来说说formData对象，同样的我们利用它来上传文件，首先需要创建一个formData对象实例 var formData = new FormData(); 这个对象有一个append方法，该方法接受三个参数：name、value、filename

在使用这个对象上传文件的时候，我们需要注意一点，需要在form标签上添加上enctype="multipart/form-data"这个属性，用来设置表单的MIME编码，因为默认的编码格式是application /x-www-form-urlencoded，不能用于文件上传，也可以在使用jQuery的$.ajax方法的时候，设置data属性为formData。上面就是该DEMO主要用到的知识点，下面附上一些源代码，和效果图。

HTML代码：

JS代码：

后台PHP代码：

支持拖拽上传样式:

不支持拖拽的样式:

代码中一些必要的地方已经写好注释了，这里也就不做过多解释，今天就先写到这里了，谢谢作者的分享。

更多精彩内容，请点击《jQuery上传操作汇总》，进行深入学习和研究。

标签: jquery插件开发方法

本文链接地址:https://www.jiuchutong.com/biancheng/386697.html 转载请保留说明！

上一篇：jQuery插件实现图片轮播特效(jquery 插件编写)

下一篇：jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】(jquery事件的响应)