jQuery File Upload 的基本使用

ec3y 9年前

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

jQuery File Upload 的基本使用

一、最少配置

<!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