jQuery File Upload 的基本使用
浏览数：48 /
时间：2015年06月09日
jQuery File Upload 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
一、最少配置
<!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>
二、上传进度显示
$(‘#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>
.bar { height: 18px;
background: green;}
附上官网API地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API
文档地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
