首页 > 代码库 > jQuery File Upload 的基本使用
jQuery File Upload 的基本使用
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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.mamicode.com/js/vendor/jquery.ui.widget.js"></script>
<script src="http://www.mamicode.com/js/jquery.iframe-transport.js"></script>
<script src="http://www.mamicode.com/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
jQuery File Upload 的基本使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。