jQuery File Upload 的基本使用

ec3y 10年前發布 | 60K 次閱讀 文件上傳 jQuery File Upload

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="http://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 

 本文由用戶 ec3y 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！