文件上传插件:Uploadify 和 Dropzone

上传文件的功能,一般用一个 <input type="file"> 就能够工作了,但如果有更细致需求,比如显示上传进度等,就需要用 JavaScript 进行更多控制,使用插件是一个很好的办法,介绍两个常用插件:Uploadify 和 Dropzone。

Uploadify 兼容性好,支持IE6+,所以使用的人很多。但为了兼容 IE6 等,使用的是 Flash,方法显得比较落伍。Dropzone 使用的是新 API,支持通过 Ajax 传输文件,兼容性就差一点,需要 IE10+。从名字也能看出来后者支持拖拽文件上传。

Uploadify

Uploadify 是一个 jQuery 插件,需要 jQuery 1.4 以上。先从官网下载压缩包,把以下必要文件释放到网站目录:

  • jquery.uploadify.min.js  插件
  • uploadify.css  样式
  • uploadify.swf  主要功能Flash
  • uploadify.php  后端接收文件
  • uploadify-cancel.png  按钮背景图(一个叉)
  • check-exists.php  用来检测文件是否已存在

还需要单独下载一份 jQuery。上面的 uploadify.php 是后端对上传文件的处理,可以换成自己的 php 代码。

部署

然后就开始编写 HTML 了,先添加好 JS 以及 CSS 文件引用,然后添加一个 <input> 控件例如

<input type="file" name="file_upload" id="file_upload">

用 Uploadify 初始化:

$('#file_upload').uploadify({
  swf: 'uploadify.swf',
  uploader: 'uploadify.php'
  // 其他选项
});

就可以了,默认的样式如下

uploadify

可以通过其他配置项修改样式等等:

  • height, width:(integer) 控件的宽和高
  • buttonText:设置按钮文字,替换上图“SELECT FILES”
  • buttonClass:给按钮添加的类。然后可以在 CSS 中自定义样式
  • auto:(boolean) 默认 true,选择文件以后自动开始上传。false 则不自动,需要自己调用方法上传
  • checkExisting:(string) 如果需要在后端检测文件是否已存在,将此值设为 check-exists.php 的路径
  • fileObjName:默认是 "Filedata",即后端需要通过 $_FILES['Filedata']
  • progressData:默认 "percentage",即显示进度百分比,也可以设为 "speed" 显示上传速度
  • formData:(Object) 可以向后端传入额外的数据,如 formData: {"someKey": "someValue"}。后端可以通过 $_POST['someKey'] 读取
  • onUploadSuccess:回调函数 function(file, data, response)file 是一个文件对象,可以读取 file.name 等属性,data 为后端返回的数据(即 echo 的内容),response 是一个布尔值,后端如果有数据返回就是 true

以及一些方法可以调用:

  • upload:手动上传文件,调用方式 $('#file').uploadify('upload');
  • cancel:取消一个或全部文件的上传
  • destroy:销毁 Uploadify 实例,卸载功能

更详细的配置可以查看官网

汉化

uploadify2

默认情况下,文件上传成功会显示“Complete”字样,如果想要自定义,可以在插件 JS 中搜索“ – Complete”,改成“ – 已完成”等等,就可以了。如果上传文件已存在,弹出的提示也是英文,可以搜索“already exists”找到那段字符修改一下。

后端处理

一个后端 php 的例子:

<?php
if (!empty($_FILES)) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetFile = 'uploads/' . $_FILES['Filedata']['name'];

    $fileTypes = array('jpg','jpeg','gif','png');
    $fileParts = pathinfo($_FILES['Filedata']['name']);

    if (in_array($fileParts['extension'],$fileTypes)) {
        move_uploaded_file($tempFile,$targetFile);
        echo '1';
    } else {
        echo '0';
    }
}
?>

Uploadify 默认的文件字段是 $_FILES['Filedata']。以上例子会限制上传文件类型为图片,然后保存在“uploads”子目录。要提前创建好“uploads”子目录否则无法正常保存。

Dropzone

Dropzone由于使用了 XMLHttpRequest 2,所以需要现代浏览器的支持,但是配置更方便,也不依赖其他库。

首先下载压缩包,实际需要的文件只有 dropzone.js 和 dropzone.css。部署起来也非常简单:

<form action="upload.php" class="dropzone" id="my-upload"></form>

在 HTML 中添加以上 <form> 就可以了。只要添加了 "dropzone" 类,Dropzone 就会自动添加功能。action 属性对应后端文件,字段是 $_FILES['file']。默认界面:

dropzone

Dropzone 也有很多的配置项,要进行配置需要先取得 Dropzone 对象实例,这就是上例 id="my-upload" 的作用,可以通过 Dropzone.options.myUpload 访问实例,注意是驼峰形式。例如绑定一个 success 事件:

Dropzone.options.myUpload = {
  init: function() {
    this.on("success", function(file,response) {
      ...
    });
  }
}

更多的配置参考:Dropzone

Dropzone 界面的文字也是可以修改的,在 JS 中搜索 "Drop files here to upload" 就能找到,可以看出 Dropzone 在自定义方面其实考虑很周到,相关的提示文字都放在一起,可以很方便地进行汉化。

Written with StackEdit.

flight