1. 插件介绍

该插件是一款支持异步上传多张图片的JavaScript插件，使用该插件可以方便地实现多张图片的上传及预览等操作。

该插件的基本特点如下：

支持多张图片上传；
支持图片预览功能；
支持图片排序功能。

2. 使用方法

使用该插件需要引入jQuery库和相关CSS样式文件，然后按照以下步骤进行操作：

2.1 HTML结构

首先在HTML文件中定义上传图片的区域，代码如下：

<div id="uploadArea">
    <div class="thumb-container">
        <div class="thumb-wrap">
            <span class="thumb-uploader">
                <input type="file" id="thumb-upload" multiple>
            </span>
        </div>
    </div>
    <div class="thumb-list"></div>
</div>

2.2 引入JS文件

然后引入JS文件，代码如下：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.ui.widget.js"></script>
<script src="path/to/jquery.iframe-transport.js"></script>
<script src="path/to/jquery.fileupload.js"></script>

2.3 JS配置参数

接着在JS文件中配置参数，代码如下：

$('#thumb-upload').fileupload({
    url: 'path/to/upload.php',
    dataType: 'json',
    autoUpload: true,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    maxFileSize: 10000000,
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo('#thumb-list');
        });
    }
});

其中各配置参数的含义如下：

url：上传文件的地址；
dataType：预期的服务器响应类型；
autoUpload：是否开启自动上传功能；
acceptFileTypes：上传文件的类型（只支持gif、jpeg、png格式）；
maxFileSize：上传文件的大小限制；
done：上传成功后的回调函数。

2.4 样式配置

最后在CSS文件中配置样式，代码如下：

.thumb-container {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.thumb-wrap {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 20px;
    vertical-align: top;
}
.thumb-uploader {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    color: #999;
    font-size: 12px;
    background: #f7f7f7;
    border: 1px dashed #e4e4e4;
    border-radius: 4px;
}
.thumb-uploader:hover {
    cursor: pointer;
}
.thumb-list {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.thumb-list li {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.thumb-list li img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

3. 示例说明

下面给出两个使用示例。

3.1 示例一：基本用法

该示例演示了基本的多张图片上传功能，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Upload Image Plugin</title>
    <link rel="stylesheet" href="path/to/jquery.fileupload.css">
    <style type="text/css">
        /* CSS样式 */
    </style>
</head>
<body>
    <div id="uploadArea">
        <div class="thumb-container">
            <div class="thumb-wrap">
                <span class="thumb-uploader">
                    <input type="file" id="thumb-upload" multiple>
                </span>
            </div>
        </div>
        <div class="thumb-list"></div>
    </div>

    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.ui.widget.js"></script>
    <script src="path/to/jquery.iframe-transport.js"></script>
    <script src="path/to/jquery.fileupload.js"></script>
    <script>
        /* JS代码 */
    </script>
</body>
</html>

3.2 示例二：图片排序功能

该示例演示了基本的多张图片上传和排序功能，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Upload Image Plugin - Sortable</title>
    <link rel="stylesheet" href="path/to/jquery.fileupload.css">
    <style type="text/css">
        /* CSS样式 */
    </style>
</head>
<body>
    <div id="uploadArea">
        <div class="thumb-container">
            <div class="thumb-wrap">
                <span class="thumb-uploader">
                    <input type="file" id="thumb-upload" multiple>
                </span>
            </div>
        </div>
        <div class="thumb-list"></div>
    </div>

    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.ui.widget.js"></script>
    <script src="path/to/jquery.iframe-transport.js"></script>
    <script src="path/to/jquery.fileupload.js"></script>
    <script>
        $('#thumb-upload').fileupload({
            url: 'path/to/upload.php',
            dataType: 'json',
            autoUpload: true,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 10000000,
            done: function (e, data) {
                $.each(data.result, function (index, file) {
                    $('<li/>').append($('<img/>').attr('src', file.url))
                              .appendTo('.thumb-list')
                              .hide()
                              .fadeIn(700);
                });
            }
        }).on('fileuploadadd', function (e, data) {
            var tpl = $('<li/>').addClass('working');
                tpl.appendTo('.thumb-list');
                tpl.fadeIn(700);
        }).on('fileuploadstop', function (e) {
            $('.thumb-list li').removeClass('working').addClass('sortable');
            sortable();
        });

        function sortable() {
            $('.thumb-list.sortable').sortable({
                items: 'li.sortable',
                placeholder: 'sortable-placeholder',
                start: function(e, ui) {
                    ui.placeholder.height(ui.item.height());
                },
                stop: function(e, ui) {
                    var order = $(this).sortable('toArray');

                    $.each(order, function(index, value) {
                        console.log("图片" + (index+1) + "的顺序为：" + value);
                    });
                }
            });
        }
    </script>
</body>
</html>

在该示例中，我们通过在上传图片完成后添加working类来给每张图片标记排序状态，在上传结束后通过sortable()函数将图片设置为可排序状态，并通过jQuery UI的sortable插件实现图片的拖动排序操作，并在停止拖动排序后输出图片的排序顺序信息。

以上就是关于“js异步上传多张图片插件的使用方法”的完整攻略，希望对大家有所帮助。

本文链接：http://task.lmcjl.com/news/998.html

展开阅读全文

上一篇：如何解决日期函数new Date()浏览器兼容性问题下一篇：网速测速方法大全

热门文章排行

推荐文章

关键词

js异步上传多张图片插件的使用方法