master

分支 (1)

管理

管理

master

zui181_example
/
uploader.html

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>文件上传</title>
    <!-- zui -->
    <link href="./zui/css/zui.css" rel="stylesheet">

    </head>
    <body>
<label>附件</label>

<div id="myUploader" class="uploader">
	<input id="file-attachment" type="hidden" name="attachment" value=""/>
	<div class="file-list" data-drag-placeholder="请拖拽文件到此处"></div>
	<div id="tip-message" class="uploader-status pull-right text-muted"></div>
	<button type="button" class="btn btn-primary uploader-btn-browse">
    <i class="icon icon-cloud-upload"> </i> 选择文件
	</button>
</div>
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="./zui/lib/jquery/jquery-1.11.0.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="./zui/js/zui.min.js"></script>
    <link href="./zui/lib/uploader/zui.uploader.css" rel="stylesheet">
    <script src="./zui/lib/uploader/zui.uploader.js"></script>
<script >
 $(function () {
        var options = {
            // 初始化选项
            url: '{:url("file/upload")}',
            autoUpload: true,
            filters: {
                max_file_size: '{$upload_config.size}',
                prevent_duplicates: true,
                mime_types: [
                    {title: '附件', extensions: 'doc,{$upload_config.ext}'},
                ],

            },
            rename: false,
            onError: function (error) {
                var message = error.message;
                switch (error.code) {
                    case -600:
                        message = '上传文件大小不能超过{$upload_config.size/1048576}M.';
                        break;
                    default:
                        message = error.message;
                }
                $('#tip-message').html('<span class="text-red">'+message+'</span>');
            },
            deleteActionOnDone: function (file, doRemoveFile) {
                doRemoveFile();
                var file_value = new Array();
                $('#myUploader').find('.file').each(function () {
                    var value = $(this).attr('data-value');
                    file_value.push(value);
                });

                $('#file-attachment').val(file_value.toString());
                return true;
            },
            responseHandler: function (responseObject, file) {

                console.log(responseObject);
                var response = JSON.parse(responseObject.response);
                if (response.result !== 'ok') {

                }

                $('#file-' + file.id).attr('data-value', response.id);

                var file_value = new Array();
                $('#myUploader').find('.file').each(function () {
                    var value = $(this).attr('data-value');
                    file_value.push(value);
                });

                $('#file-attachment').val(file_value.toString());
            }
        };
        var $uploader = $('#myUploader').uploader(options);
    });

    </script>