jQuery-File-Upload 的使用

最新推荐文章于 2024-08-21 08:41:46 发布

猪脚踏浪

最新推荐文章于 2024-08-21 08:41:46 发布

阅读量2.7k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/zsg88/article/details/70803195

版权

javascript 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

Query-File-Upload是一个jquery下的ajax文件上传插件, 官网：http://blueimp.github.io/jQuery-File-Upload/ , 官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API

下载下来的包东西很多.一般应用不需要那么多东西。

(一)css,js:

<link rel="stylesheet" href="css/jquery.fileupload.css">  
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">

<script src="js/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>

如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入.

(二)Html控件

<input type="file" name="files" id="fileupload_input" />

(三)完整例子

<!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.8.3/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>

(四) 进度条
插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示：
$('#fileupload').fileupload({
/* ... */
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
}
});

需要一个<div>容器用来显示进：
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>

需要给进度条不同颜色显示才行，可以通过CSS来设置：
.bar {
height: 18px;
background: green;
}

将要上传的文件名显示在一个元素节点上：
你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
$(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 () {
$(this).replaceWith($('<p/>').text('Uploading...'));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});