jQuery插件实现文件上传功能（支持拖拽）
网络编程 发布日期：2024/10/4 浏览次数：1
先贴上源代码地址，点击获取。然后直接进入主题啦，当然，如果你觉得我有哪里写的不对或者欠妥的地方，欢迎留言指出。在附上一些代码之前，我们还是先来了解下，上传文件的时候需要利用的一些必要的知识。
首先我们要说的就是FileReader对象，这是一个HTML5提出的，专门用来异步的读取用户计算机上文件的对象，这里有详细的介绍。所以如果我们想要使用它，那么首先我们得先创建一个FileReader对象。
var fr = new FileReader()
1、这个对象拥有五个方法：
下面附上一个例子：
<input type="file" id="file"/> <img src="/UploadFiles/2021-04-02/">效果图：
其他的几个方法也基本上大同小异，所以在这里就不做过多解释了。
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代码：
<div class="up_load_file"> </div> <script src="/UploadFiles/2021-04-02/jquery-1.11.3.js">JS代码：
;(function ($, undefined) { $.fn.uploadfile = function (setting) { var defaultSetting = { url : 'file.php', width : 600, height : 50, canDrag : true, canMultiple : true, success : function (fileName) { //单个文件上传成功的回调函数 }, error : function (fileName) { //单个文件上传失败的回调函数 }, complete : function () { //上传完成的回调函数 } }; //判断浏览器是否支持FileReader if(!window.FileReader){ alert('您的浏览器不支持FileReader，请更换浏览器。'); return; } setting = $.extend(true, {}, defaultSetting, setting); setting.width < 450 && (setting.width = 450); $(this).each(function (i, item) { var demoHtml = ''; //是否可以拖拽图片上传，构造dom结构 if(setting.canDrag){ setting.height < 200 && (setting.height = 200); demoHtml += '<div class="file_sel">'; demoHtml += '<div class="file_input">'; demoHtml += '<div class="sel_file_img">'; demoHtml += '<span><img src="/UploadFiles/2021-04-02/add_img.png">后台PHP代码：
$fileName = $_FILES['file']['name']; $type = $_FILES['file']['type']; $size = $_FILES['file']['size']; $fileAlias = $_FILES["file"]["tmp_name"]; if($fileAlias){ move_uploaded_file($fileAlias, "uploadfile/" . $fileName); } echo 'fileName: ' . $fileName . ', fileType: ' . $type . ', fileSize: ' . ($size / 1024) . 'KB';支持拖拽上传样式:
不支持拖拽的样式:
代码中一些必要的地方已经写好注释了，这里也就不做过多解释，今天就先写到这里了，谢谢作者的分享。
更多精彩内容，请点击《jQuery上传操作汇总》，进行深入学习和研究。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
