你的位置:首页 > Java教程

[Java教程]jQuery插件之路(三)——文件上传(支持拖拽上传)


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

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

var fr = new FileReader()

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

方法名

参数

描述

abort

中断读取

 readAsArrayBuffer

file

开始读取file中的内容

readAsBinaryString

file将文件读取为二进制码
readAsDataUrlfile将文件读取为URL
readAsTextfile,[encoding]讲文件读取为文本

下面附上一个例子:

<input type="file" id="file"/>  <img src="" alt="" id="img">  <script src="jquery.min.js"></script>  <script>    var ipt = $('#file'),    img = $('#img');    ipt.change(function () {      var fr = new FileReader();      fr.readAsDataURL(this.files[0]);      fr.onload = function () {        img.attr('src', fr.result);      }    })  </script>

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

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

常量名描述
EMPTY0还没有加载任何数据
LOADING1数据正在被加载
DONE2加载完毕

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

属性名类型描述
errorDOMError在读取文件时发生的错误. 只读.
readyStateunsigned short表明FileReader对象的当前状态. 值为State_constants中的一个. 只读
resultjsval读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

4、6个事件处理程序:

事件名描述
onabort当读取操作被中止时调用
onerror当读取操作发生错误时调用.
onload当读取操作成功完成时调用.
onloadend当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
onloadstart当读取操作将要开始之前调用
onprogress在读取数据过程中周期性调用.

这里我们再来说说formData对象,同样的我们利用它来上传文件,首先需要创建一个formData对象实例

var formData = new FormData();

这个对象有一个append方法,该方法接受三个参数:name、value、filename

参数名描述
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="js/jquery-1.11.3.js"></script>  <script src="js/uploadfile.js"></script>  <script>    $('.up_load_file').uploadfile({      url : 'file.php',      width : 500,      height : 50,      canDrag : true,      canMultiple : true,      success: function (fileName) {        alert(fileName + '上传成功');      },      error: function (fileName) {        alert(fileName + '上传失败');      },      complete : function () {        alert('所有文件上传完毕');      }    });  </script>

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 >';        demoHtml +=          '<div >';        demoHtml +=            '<div >';        demoHtml +=              '<span><img src="img/add_img.png"/></span>';        demoHtml +=            '</div>';        demoHtml +=            '<div >';        demoHtml +=              '<input type="file"/>';        demoHtml +=              '<button>点击选择文件</button>';        demoHtml +=            '</div>';        demoHtml +=          '</div>';        demoHtml +=          '<div >';        demoHtml +=            '<span>或者将文件拖到此处</span>';        demoHtml +=          '</div>';        demoHtml +=        '</div>';        demoHtml +=        '<div >';        demoHtml +=          '<div >';        demoHtml +=            '当前选择了<span >0</span>个文件,共<span >0</span>KB。';        demoHtml +=            '<input type="file"/>';        demoHtml +=            '<button >继续选择</button>';        demoHtml +=            '<button >开始上传</button>';        demoHtml +=          '</div>';        demoHtml +=        '</div>';        demoHtml +=        '<div >';        demoHtml +=        '</div>';      }else{        setting.height < 50 && (setting.height = 50);        $(item).addClass('noDrag');        demoHtml +=    '<div >';        demoHtml +=      '<div >';        demoHtml +=        '当前选择了<span >0</span>个文件,共<span >0</span>KB。';        demoHtml +=        '<input type="file"/>';        demoHtml +=        '<button >继续选择</button>';        demoHtml +=        '<button >开始上传</button>';        demoHtml +=      '</div>';        demoHtml +=    '</div>';        demoHtml +=    '<div >';        demoHtml +=      '<div >';        demoHtml +=        '<input type="file"/>';        demoHtml +=        '<div ></div>';        demoHtml +=      '</div>';        demoHtml +=    '</div>';      }      $(item).css({        width : setting.width,        height : setting.height,        display : 'block'      });      $(item).html(demoHtml);      //获取DOM节点      var fileArr = [],      fileSize = 0,      _this = $(item),      fileDrag = $('.file_sel .file_drag', _this),      selFileIpt = $('input[type=file]', _this),      selFileBtn = selFileIpt.next();      fileCount = $('.file_info_handle .file_info .file_count', _this),      fileSz = $('.file_info_handle .file_info .file_size', _this),      beginUpload = $('.file_info_handle .file_info .uploadfile', _this),      fileShow = $('.file_show', _this),      noDragSelFile = $('.file_show .sel_file_btn', _this);            //显示拖拽上传部分      setting.canDrag || fileShow.show();      //是否可以多选      setting.canMultiple && selFileIpt.attr('multiple', 'multiple');      //绑定事件      selFileIpt.on('change', selFile);      //让按钮去触发input的click事件      selFileBtn.on('click', function () {         $(this).prev().click();      })      fileDrag.on({        dragover : dragOver,         drop : selFile      })      beginUpload.on('click', upLoadFile);            // 选择文件      function selFile (e) {        e = e || window.event;        //阻止浏览器的默认行为        if(e.preventDefault){           e.preventDefault();          }else{          e.returnValue = false;        }        var files = this.files || event.dataTransfer.files,        src = 'img/',        imgSrc;        Array.prototype.forEach.call(files, function (item, i) {          //防止重复选择相同的文件          var notExist = fileArr.some(function (existFile) {            return existFile.name === item.name;          })          if(notExist && fileArr.length != 0){            return !notExist;          }          fileArr.push(item);          var fr = new FileReader();          fr.readAsDataURL(item);          fr.onload = function () {            //判断展示的文件类型            if(item.type.indexOf("image") > -1){              imgSrc = fr.result;            }else if(item.name.indexOf("rar") > -1){              imgSrc = src + 'rar.png';            }else if(item.name.indexOf("zip") > -1){              imgSrc = src + 'zip.png';            }else if(item.type.indexOf("text") > -1){              imgSrc = src + 'txt.png';            }else{              imgSrc = src + 'file.png';            }            //展示选择的文件            var imgDom = $('<span ><span title="上传成功"></span><span ><span title="'+ item.name +'">'+ item.name +'</span><span ></span></span><img src="'+ imgSrc +'"/></span>');            if(setting.canDrag){              fileShow.css('display') === 'none' && fileShow.show();              fileShow.append(imgDom);            }else{              fileShow.css('display') === 'none' && fileShow.show();              noDragSelFile.before(imgDom);            }          }        })         //选择的文件的信息        fileCount.html(fileArr.length);        fileSz.html(getFileInfo());        //防止在删除了上次选择的文件后,再次选择相同的文件无效的问题。        this.value ='';       }      //拖拽      function dragOver (e) {        var event = e || window.event;        event.preventDefault();      }      //上传文件      function upLoadFile () {        if(!fileArr.length){          alert('请选择文件');          return;        }        fileArr.forEach(function (item, i) {          var upLoadSuccess = $('.img_box').eq(i).children('.up_load_success');                    //防止重复上传          if(upLoadSuccess.css('display') === 'block') return false;            var formData = new FormData();          formData.append('file', item);          $.ajax({            url: setting.url,            type: 'POST',            cache: false,            data: formData,            processData: false,            contentType: false          }).done(function(res) {            //上传成功图标            upLoadSuccess.show();            //单个文件上传成功执行回调            setting.success(item.name);            //全部文件上传完成执行回调函数            (i === (fileArr.length - 1)) && setting.complete();          }).fail(function(res) {            //单个文件上传失败执行回调            setting.error(item.name);            (i === (fileArr.length - 1)) && setting.complete();          });        })      }      //计算文件信息      function getFileInfo () {        //每次重新计算大小,防止单位不同造成错误        fileSize = 0;        fileArr.forEach(function (item, i) {          fileSize += item.size;        })        fileSize = (fileSize / 1024).toFixed(2);        return fileSize;      }      fileShow.on('click', '.icon-bin' , function () {        //删除节点        var index = $(this).parents('.img_box').index();        $(this).parents('.img_box').remove();        //删除上传文件        fileArr.splice(index, 1);        //修改文件信息        fileCount.html(fileArr.length);        fileSz.html(getFileInfo());        //隐藏文件显示区域        !setting.canDrag || fileArr.length || fileShow.hide();      })    })  }})(jQuery)

View Code

后台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';

 

支持拖拽上传样式。不支持拖拽的样式。

代码中一些必要的地方已经写好注释了,这里也就不做过多解释,今天就先写到这里了。作者敲代码也不容易,如果你觉得这些内容还有那么一些价值的话,请点下赞,谢谢^_^。