jQuery-File-Upload 的使用

曾经终败给现在 2022-06-17 12:48 89阅读 0赞

Query-File-Upload是一个jquery下的ajax文件上传插件, 官网：http://blueimp.github.io/jQuery-File-Upload/  , 官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API

下载下来的包东西很多.一般应用不需要那么多东西。

(一)css,js:

如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入.

(二)Html控件

(三)完整例子

<!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.8.3/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>

(四) 进度条  
插件支持显示每个文件的上传进度(progress)显示和所有文件的总体上传进度(progressall)显示：  
$('\#fileupload').fileupload(\{  
    /\* ... \*/  
    progressall: function (e, data) \{  
        var progress = parseInt(data.loaded / data.total \* 100, 10);  
        $('\#progress .bar').css(  
            'width',  
            progress + '%'  
        );  
    \}  
\});  
  
  
需要一个<div>容器用来显示进：  
<div id="progress">  
    <div class="bar" style="width: 0%;"></div>  
</div>  
  
  
需要给进度条不同颜色显示才行，可以通过CSS来设置：  
.bar \{  
    height: 18px;  
    background: green;  
\}  
  
  
将要上传的文件名显示在一个元素节点上：  
你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：  
$(function () \{  
    $('\#fileupload').fileupload(\{  
        dataType: 'json',  
        add: function (e, data) \{  
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);  
            data.submit();  
        \},  
        done: function (e, data) \{  
            data.context.text('Upload finished.');  
        \}  
    \});  
\});  
  
  
(五)点击按钮来开始上传  
可以通过按钮点击事件来触发上传（上例是自动上传）：  
$(function () \{  
    $('\#fileupload').fileupload(\{  
        dataType: 'json',  
        add: function (e, data) \{  
            data.context = $('<button/>').text('Upload')  
                .appendTo(document.body)  
                .click(function () \{  
                    $(this).replaceWith($('<p/>').text('Uploading...'));  
                    data.submit();  
                \});  
        \},  
        done: function (e, data) \{  
            data.context.text('Upload finished.');  
        \}  
    \});  
\});