jQuery File Upload 的基本使用
ec3y
10年前
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