首页 > 代码库 > 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 的基本使用