zoukankan      html  css  js  c++  java
  • jQuery-File-Upload

    Basic plugin

    https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

    https://github.com/blueimp/jQuery-File-Upload/wiki/API

    https://github.com/blueimp/jQuery-File-Upload/wiki/Options

    How to use only the Basic plugin (minimal setup guide)

    The plugin download package comes with a complete user interface based on Bootstrap.

    However, if you want to build your own user interface, it is possible to use only the basic plugin version and a minimal setup.
    The following is an alternative to index.html with only the minimal requirements and a simple done callback handler (see API and Options on how to use the different options and callbacks):

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

    Response and data type

    The example above sets the dataType option to json, expecting the server to return a JSON response for each uploaded file.

    However it's also possible to handle HTML content types as response or any other dataType that you can handle in your done handler.

    How to display upload progress with the basic plugin

    The fileupload plugin triggers progress events for both individual uploads (progress) and all running uploads combined (progressall). 【progress all】

    Event handlers can be set via the event binding mechanism or as widget options (see API and Options documentation):

    $('#fileupload').fileupload({
        /* ... */
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        }
    });

    The previous code assumes a progress node with an inner element that displays the progress status via its width percentage:

    <div id="progress">
        <div class="bar" style=" 0%;"></div>
    </div>

    The inner element should have a different background color than the container node, set via CSS and needs a height applied:

    .bar {
        height: 18px;
        background: green;
    }

    How to tie a file to an element node during the life cycle of an upload

    Often, you will display a file to upload in an element node. This can be done in the add callback.
    To be able to refer to the same element node in other callbacks related to the upload, you can make use of the context option (which is actually an option of jquery.ajax):

    $(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.');
            }
        });
    });

    How to start uploads with a button click

    Based on the previous example, it's possible to start uploads on the click of a button instead of automatically:

    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            add: function (e, data) {
                data.context = $('<button/>').text('Upload')
                    .appendTo(document.body)
                    .click(function () {
                        data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                        data.submit();
                    });
            },
            done: function (e, data) {
                data.context.text('Upload finished.');
            }
        });
    });

     Expected response

    https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

    1. Extend your custom server-side upload handler to return a JSON response akin to the following output:
    {"files": [
      {
        "name": "picture1.jpg",
        "size": 902604,
        "url": "http://example.org/files/picture1.jpg",
        "thumbnailUrl": "http://example.org/files/thumbnail/picture1.jpg",
        "deleteUrl": "http://example.org/files/picture1.jpg",
        "deleteType": "DELETE"
      },
      {
        "name": "picture2.jpg",
        "size": 841946,
        "url": "http://example.org/files/picture2.jpg",
        "thumbnailUrl": "http://example.org/files/thumbnail/picture2.jpg",
        "deleteUrl": "http://example.org/files/picture2.jpg",
        "deleteType": "DELETE"
      }
    ]}

    To return errors to the UI, just add an error property to the individual file objects:

    {"files": [
      {
        "name": "picture1.jpg",
        "size": 902604,
        "error": "Filetype not allowed"
      },
      {
        "name": "picture2.jpg",
        "size": 841946,
        "error": "Filetype not allowed"
      }
    ]}

    When removing files using the delete button, the response should be like this:

    {"files": [
      {
        "picture1.jpg": true
      },
      {
        "picture2.jpg": true
      }
    ]}

    Note that the response should always be a JSON object containing a files array even if only one file is uploaded.

    Visit the uploaded directory - you should see the same file upload interface as in the demo, allowing you to upload files to your website.

     jquery.fileupload文件结构分析

     https://blueimp.github.io/jQuery-File-Upload/  这个demo页面add files按钮点击之后,触发了_onAdd: function (e, data)

    Requirements

     

    Mandatory requirements

     

    Optional requirements

    The user interface of all versions, except the jQuery UI version, is built with Bootstrap and icons from Glyphicons.

    扩展阅读

    https://github.com/blueimp/jQuery-File-Upload/wiki#forks-and-extensions

    https://github.com/blueimp/jQuery-File-Upload/wiki#aspnet

    https://github.com/blueimp/jQuery-File-Upload/wiki/Frequently-Asked-Questions

    File upload with cropping support using Cropper

    demo https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html

  • 相关阅读:
    剑指offer:合并两个排序的链表
    剑指offer:调整数组顺序使奇数位于偶数前面
    剑指offer:链表中倒数第K个结点
    牛客网在线编程:末尾0的个数
    剑指offer7:数值的整数次方
    牛客网在线编程:计算糖果
    牛客网在线编程:求数列的和
    牛客网在线编程:公共字符
    剑指offer7:斐波那契数列
    Qt入门之常用qt控件认知之Button系列
  • 原文地址:https://www.cnblogs.com/chucklu/p/11058664.html
Copyright © 2011-2022 走看看