jQuery插件实现文件上传功能（支持拖拽）

站长资源 2024/11/29 佚名

37 1538 37

DDR爱好者之家 Design By 杰米

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

首先我们要说的就是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上传操作汇总》，进行深入学习和研究。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    jquery拖拽上传文件,jquery拖拽上传,jquery文件上传,jquery上传 
                                DDR爱好者之家 Design By 杰米