安装说明延伸


注意:

虽然本代码包中包含的演示示例引用的是公共远程服务端的文件源, 但在实际项目中还是建议你下载所有的依赖项并上传到自己的服务器上。

不过这不包括放置在 Google 的内容分发网络(CDN)上的脚本文件,Google CDN 是比 GitHub Demo 页面更稳定的访问源。(译者注:在国内 Google CDN 是不可靠的)

PHP 站点上使用 jQuery FileUpload(UI 版本)


  1. 请先阅读安全指引
  2. 在确保已启用 .htaccess 支持或已按照安全指引中的 Apache 配置示例安装后,继续下一步。
  3. 下载插件代码压缩包,解压并将提取的文件夹(可以重命名)上传到你的服务器。
  4. 访问上传​​的目录 - 你应该会看到与 Demo 相同的文件上传界面,其允许你将文件上传到你的网站。
  5. 如果文件上传失败,请确保 server/php/files 目录已对你的服务端程序开放写权限。
  6. 最后,可以上传一个文件内容为 <?php phpinfo();,取名叫 phpinfo.php 的文件。不过要确保它在直接访问其 URL 的时候不会被 Web 服务端所执行。

Google App Engine 上使用 jQuery FileUpload(UI 版本)


  1. 首先阅读安全指引
  2. 下载插件代码压缩包,解压并部署 server/gae-pythonserver/gae-go 文件夹(取决于你要使用的运行环境)作为你的 App Engine 实例。
  3. demo.js 中的 url 选项调整为 App Engine 实例的 URL 后,把 jQuery-File-Upload 文件夹(无需包括 server 子文件夹)上传到任何服务器。

访问该上传目录 - 这时你应该看到与 demo 相同的文件上传界面,其允许你将文件上传到你的 App Engine 实例。

在自有服务端程序中使用 jQuery FileUpload(UI 版本)


  1. 首先阅读安全指引
  2. 在你的平台上(Ruby、Python、Java 等)实现一个可以接收常规 form 表单文件的后端处理程序。可以参考指南总览中关于服务端的教程。
  3. 下载并解压插件的代码压缩包。
  4. 修改 demo.js 文件中的 url 选项改为你的处理程序的 URL。或者,你也可以删掉 url 选项,直接将 index.html 中的 HTML 表单元素的 action 属性改为你上传处理程序的 URL。如果你的处理程序接收文件所用的参数名称不为 files[] 的话,那么则要修改表单中 file input 元素的 name 属性为你所需要的名称,当然设置 paramName 配置项(参考配置项手册)也是可以的。
  5. 将 jQuery-File-Upload 文件夹上传到你的站点。
  6. 对你服务端的上传处理程序做一些扩展,使其返回类似于以下格式的 JSON 响应:
{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "url": "http:\/\/example.org\/files\/picture1.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
    "deleteType": "DELETE"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "url": "http:\/\/example.org\/files\/picture2.jpg",
    "thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
    "deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
    "deleteType": "DELETE"
  }
]}

若想返回错误信息给前端,只需要在各个 file 对象中加上 error 属性:

{"files": [
  {
    "name": "picture1.jpg",
    "size": 902604,
    "error": "Filetype not allowed"
  },
  {
    "name": "picture2.jpg",
    "size": 841946,
    "error": "Filetype not allowed"
  }
]}

对于使用 delete 按钮删除文件的情况,响应应如下所示:

{"files": [
  {
    "picture1.jpg": true
  },
  {
    "picture2.jpg": true
  }
]}
请注意,即使只上传了一个文件,返回的响应也应始终是一个由 files 数组构成的 JSON 对象。

现在可以访问上传​​的目录,此时你应该看到一个与 demo 相同的文件上传界面,其允许你将文件上传到你的网站。

Content-Type 协定

对于一些不支持 XMLHTTPRequest(XHR) 文件上传的浏览器,比如 Microsoft Internet ExplorerOpera,本插件会用到一个 Iframe 传输模块进行上传。

基于 Iframe 的上传它要求 JSON 响应的 Content-type 必需为 text/plaintext/html,因为 IE iframe 无法正确处理 application/json 响应。

你可以利用 Accept header 为文件上传返回不同 content-type 的响应。下面提供一段 PHP 的代码示例,其通过 Accept 响应不同的 content-type:

<?php
header('Vary: Accept');
if (isset($_SERVER['HTTP_ACCEPT']) &&
    (strpos($_SERVER['HTTP_ACCEPT'], 'application/json') !== false)) {
    header('Content-type: application/json');
} else {
    header('Content-type: text/plain');
}
?>

以下是正确返回 Content-Type 的 Ruby on Rails 示例:

def update_attachment
  name  = params[:attachment_name]
  style = params[:attachment_style]
  image = params[:user][name]

  raise "No attachment #{name} for User!" unless User.attachment_definitions[name.to_sym]

  current_user.update("#{name}" => image)
  render(json: current_user.to_fileupload(name, style), content_type: request.format)
end

Ruby 的 render 方法多亏有 content_type 选项,这样 IE 和支持 XHR 的浏览器都能设置正确的 header。

作为记录,以下是 to_fileupload 方法:

def to_fileupload(attachment_name, attachment_style)
  {
    files: [
      {
        id:   read_attribute(:id),
        name: read_attribute("#{attachment_name}_file_name"),
        type: read_attribute("#{attachment_name}_content_type"),
        size: read_attribute("#{attachment_name}_file_size"),
        url:  send(attachment_name).url(attachment_style)
      }
    ]
  }
end

仅使用插件的基础版本


如果你想独立构建自己的界面,请参考基础安装指南(最小安装指南)。