jQuery File Upload 的基本使用

時間 2019-11-12

原文原文鏈接

jQuery File Upload 是一個Jquery圖片上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各類動態語言開發的服務器端。php

1、最少配置css

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

2、上傳進度顯示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/APIjquery

文檔地址：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin git

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。