最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些.
使用文档
插件的基本信息
- 插件demo
https://blueimp.github.com/jQuery-File-Upload/ - 插件配置
官方文档:https://github.com/blueimp/jQuery-File-Upload/wiki/Setup
配置指令
提示:
尽管资源库的演示包含了远程服务的源文件,但是还是建议使用的时候将它们下载上传到自己的服务器上.这是比github demo界面更可靠的来源
在PHP网站上使用jQuery文件上传(UI版本)
1.如果你的网站是php,那么使用我们提供的插件只需要一步.下载并提取它,然后将提取的文件夹放到你自己的项目里.
访问你下载的目录 你应该可以看到和demo一样的功能,可以上传文件到你的网络.
如果插件并不能顺利使用,请确认你的php目录允许你的服务器请求访问.
node.js使用file upload
你可以导入安装一个节点,node.js通过via在您的服务器上传服务.(node.js和via都是类似于github的开源社区,不过使用上有点不一样,感兴趣可以自己看一下.node官方网站:https://nodejs.org/en/ via官方网站:https://www.npmjs.com/)
你可以通过下面的代码来运行服务
./node_modules/blueimp-file-upload-node/server.js
然后下载插件文档,提取出来后,将main.js文件中的url设置为你自己的url(例如:http://localhots:8080)
然后你可以上传你的项目文件(不要放没用的服务器文件夹)到任何静态服务器上并且使用它.
使用一个定制的服务器端上传处理程序(jQuery)
1.在您的项目中要实现文件上传处理的功能(Ruby.Python.Java等),它处理基于表单的文件上传.并将其上传到您的服务器.具体请参阅文档主页的教程.(具体的使用会在后边更新翻译,大概的看了一眼java的,官网地址:https://github.com/blueimp/jQuery-File-Upload/wiki)
2.下载并解压下载插件.
3.修改main.js并且将url设置为你自定义的文件上传路径.或者你可以删除url,然后通过html编辑,将html表单的动作属性调整到你自定义的文件上传的url.如果你的上传需要另一个参数名字,那么你就需要调整文件输入名属性或者设置paraName选项.
4.将插件目录上传到你的网址.
5.返回的值是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"
}
]}
如果想返回错误信息,那么在对象中加入错误信息相关的属性就可以了.
{"files": [
{
"name": "picture1.jpg",
"size": 902604,
"error": "Filetype not allowed"
},
{
"name": "picture2.jpg",
"size": 841946,
"error": "Filetype not allowed"
}
]}
如果需要使用删除按钮来删除文件,请求如下:
{"files": [
{
"picture1.jpg": true
},
{
"picture2.jpg": true
}
]}
注意即使是只上传了一个文件,响应也是种是一个包含数组的json对象.
然后你应该可以看到和demo中一样的文件上传,允许你讲照片上传到你自己的网络上.
注意事项和其他相关探讨.
插件使用的是Iframe传输模块,用于像Microsoft Internet Explorer和Opera这样的浏览器，不支持XMLHTTPRequest类型文件上传。
基于iframe的上传需要为json响应提供tex/plain或者text/html的内容类型,如果ifame的响应被设置为application/json,那么它们讲提示一个不需要下载的对话框.
你可以使用Accept表头来为文件上传响应提供不同的内容类型,下面是接受content-type变更的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事例:
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
render 中的 content-type属性,为ie和其他浏览器设置了正确的标头
为了记录,这是to_fileuoload方法:
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
如果只是想使用最基本的插件那么请看这些
官方文档:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
基础插件
下载的插件包含了一个基于bootstrap的完整用户界面.
如果你想使用自己的界面,是可以使用最基本的插件的.
html中只有最低限度的需求和简单的回调处理(可以参考API来参考使用不同的回调选项)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
响应数据类型.
使用的例子都是讲数据类型设置为json,希望服务器为每一个上传文件返回一个json响应,但是恶意处理html内容将响应转换为其他类型,也可以在完成处理的方法处理数据类型.
如何在基本的上传文件插件中显示上传进度.
fileload插件触发个人上传和所有上传的季度时间,事件处理程序可以通过绑定按钮之类的(参考api文档)
$('#fileupload').fileupload({
/* ... */
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
前边的代码使用内部元素来显示进度节点,节点通过百分比来显示进度状态:
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
可以通过css文件设置不同的背景颜色和进度条类型.
.bar {
height: 18px;
background: green;
}
异步处理
通常情况下,可以再add callback中完成回调,为了能达到异步处理的效果,你可以使用context属性(实际是jquery.ajax的属性 官网:http://api.jquery.com/jQuery.ajax/)
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
如何通过点击按钮上传
根据前边的例子,是可以用点击按钮上传来代替自动上传的
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
客户端图像大小的调整.
如果想调整客户端图像大小,你需要引入以下文件:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
然后你要做的就是将disableImageResize 设置为false
默认图片大小为1920*1080,你可以更改它的属性
$('#fileupload').fileupload({
url: '//jquery-file-upload.appspot.com/',
dataType: 'json',
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 800,
imageCrop: true // Force cropped images
})
网友评论