不错的jquery上传插件jQuery File Upload 正确使用方式 很全面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery File Upload Example</title>
<link rel="stylesheet" href="path/to/jquery.fileupload.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.ui.widget.js"></script>
<script src="path/to/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);
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
<style>
#progress .progress-bar {
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress" class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</body>
</html>这个示例展示了如何使用jQuery File Upload插件来上传文件，并在上传完成后显示文件名。同时，它还包括了进度条的实时更新，展示了如何使用jQuery和CSS来实现用户界面的更新。
评论已关闭