安装

安装说明

注意:
尽管这个仓库中包含的演示例子包括存放在远程服务器的源文件，但仍然推荐下载所有文件并上传到你自己的服务器上面。
但上述的不包括放在在Google CDN上的脚本文件,这是一个比放在GitHub demo pages更可靠的途径。

在PHP网站上使用本插件(UI版本)

我们提供了一个供演示的例子，你只需要一个步骤将它加到你的PHP网站上。

下载插件，提取你所需要的那部分文件(允许重命名)并上传到你的服务器。
2.访问上传目录，你应该看到和演示例子相同的文件上传界面，然后你就可以上传文件到你的网站了。
3.如果无法上传文件,确保php 中相应的文件目录有服务器有写入权限。

注意:
请记住，当你在服务器上运行本插件的时候要注意采取一些安全措施。

在Google App Engine网站上使用本插件(UI版本)

下载插件,提取你所需要的那部分文件上传到server/gae-python文件夹或者server/gae-go文件夹(取决于你的运行环境) 作为你的App Engine 例子, 在编辑 app.yaml/inside文件时用你自己的App ID代替"jquery-file-upload" 。
上传jQuery-File-Upload文件夹(不包括server子文件夹)到任意的服务器上，然后在main.js里调整url选项以适应你的App Engine例子。

访问上传目录，你应该看到和demo相同的文件上传界面，然后你就可以上传文件到你的App Engine例子.

在Node.js网站上使用本插件(UI版本)

你可以安装Node.js例子，然后通过npm上传服务到你的服务器上：
npm install blueimp-file-upload-node
你可以使用以下命令开启服务：
./node_modules/blueimp-file-upload-node/server.js
接下来，下载插件，提取所需部分，然后在main.js里修改url选项以适应你的Node.js服务。(例如 "http://localhost:8080")
然后，你可以上传项目文件夹(去掉不必要的服务器子文件夹)到任何静态文件服务器并使用本插件作为你的 Node.js上传服务。
在运行上传服务前，确保imagemagick CLI工具已经安装在服务器上。

在自定义的服务器上使用本插件(UI版本)

1.在你的平台上 (Ruby, Python, Java等等) 实现能处理一般表单的文件上传问题的处理程序，并且上传到你的服务器上面。参见文档主页的服务器端具体教程。

下载并解压插件文件。
3.编辑main.js文件里的url选项以配合你自定义文件上传处理程序URL。或者你可以删除url选项然后编辑index.html调整HTML表单元素里的action属性以配合你自定义文件上传处理程序URL，如果你的上传程序要求第二个参数名file[]，你可以调整文件输入(file input)name属性或者设置参数选项(详情请看选项文档)
上传 jQuery-File-Upload文件夹到你的网站。

扩展你的自定义服务器端上传处理程序返回一个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"
}
]}

如果想返回错误的界面,只需在你的文件选项里添加一个error属性对象:

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

注意！响应应该是一个JSON对象数组，哪怕只有一个文件上传。

访问上传目录,您应该看到和demo相同的文件上传页面，然后你就可以上传文件到你的网站上了。

Content-Type Negotiation

当浏览器不支持XMLHTTPRequest方式文件上传时，本插件会利用浏览器中的Iframe Transport模块上传文件，比如Microsoft Internet Explorer 浏览器和 Opera 浏览器。

利用Iframe上传时，会要求Content-type为text/plain 或 text/html作为JSON 响应。因此如果iframe响应被设为application/json，浏览器会显示一个你不想看到的下载对话框。

你可以用接收头部(Accept header)提供不同的 content types作为文件上传响应。下面是PHP例子代码片段:

下面是一个Ruby on Rails的例子教你提供适当的 Content-Type：

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

幸亏有content_type渲染选项，在IE和真正的浏览器里已经设置好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

只使用本插件的基本版本

如果你想构建自己的上传界面,请参阅基本插件向导(最小安装指南)

原文地址
译者：m_cat
(PS:由于本人才疏学浅，翻译不对之处敬请指出。)

jQuery-File-Upload文档翻译(安装)

安装