安装
安装说明
注意:
尽管这个仓库中包含的演示例子包括存放在远程服务器的源文件，但仍然推荐下载所有文件并上传到你自己的服务器上面。
但上述的不包括放在在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例子代码片段:
<?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');
}
?>
下面是一个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:由于本人才疏学浅，翻译不对之处敬请指出。)
网友评论