jQuery-File-Upload文档翻译(最小安装指南)
2015-01-22 本文已影响939人
mcat
基础插件
如何使用本插件的基础版本(最小安装指南)
插件下载包自带一个完整的用户界面基于Bootstrap
但是，如果你想构建自己的界面，可以只使用基础版本和最小安装。
下面是只有最小的需求和一个简单done回调函数的index.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>
响应和数据类型(Response and data type)
上面的示例中，数据类型(dataType)选项设置为json,期待服务器为每个上传的文件返回一个json响应。然而也可以接受那些能处理HTML内容类型或者你的done回调函数里可以处理的数据类型作为响应。
如何显示基础插件中上传进度
本插件可以设置为一个或多个上传动作触发进度事件。你可以通过事件绑定机制或小部件选项设置事件处理程序(Event handler)（详情请查看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回调函数来实现。
为了能够在其他与上传相关的回调函数里引用相同元素节点，你可以使用context选项(那个实际上是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.');
}
});
});
如何实现客户端图片调整
请看客户端图片调整
