jlutt
/
PrintShopMisUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="js/plupload/js/jqueryui/jquery-ui.min.js"></script>-->
    <!--    <link rel="stylesheet" href="js/plupload/js/jqueryui/jquery-ui.min.css"/>-->
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css"/>
    <script type="text/javascript" src="js/plupload/plupload.full.min.js"></script>
    <style>
        .upload {
            width: 100%;
            text-align: center;
        }

        .title_span {
            font-size: 24px;
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            line-height: 32px;
            margin-bottom: 16px;
            margin-top: 16px;
        }
    </style>
</head>
<body>
<div class="upload">
    <img src="img/upload.png" style="width: 80px;height: 80px"/>
    <div class="title_span">
        上传文件
    </div>
    <div class="form-horizontal" role="form" style="width: 50%;margin: 0 25%;">
        <div class="form-group">
            <label class="col-md-3 control-label">
                订单名称
            </label>
            <div class="col-md-6">
                <input id="orderName" type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">
                订单编号
            </label>
            <div class="col-md-6">
                <input id="orderCode" type="text" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label" id="fileType">
                上传文件
            </label>
            <div class="col-md-6" style="text-align: start">
                <button id="uploader" type="submit" class="btn btn-primary" style="background-color: #409EFF;border-color: #409EFF;">请选择上传文件</button>
            </div>
        </div>
        <div class="form-group tableDiv" style="display: none">
            <div class="col-md-8 control-label col-md-offset-2">
                <table class="table table-bordered table-hover table-condensed">
                    <thead style="text-align: center">
                    <!--        <th>#</th>-->
                    <th>文件名</th>
                            <th></th>
                    </thead>
                    <tbody id="tableBody">
                    </tbody>
                </table>
            </div>

        </div>
        <div class="form-group tableDiv" style="display: none">
            <div class="col-md-6 col-md-offset-2" style="text-align: start">
                <button id="startUpload" type="submit" class="btn btn-primary" style="background-color: #409EFF;border-color: #409EFF;">开始上传</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var type = query('type')
        var orderId = query('id')
        var orderName = query('orderName')
        var orderCode = query('orderCode')
        var idUser = query('idUser')
        var supplierCode = query('supplierCode')
        var dataSourceId = query('dataSourceId')

        var url = '/apis/upload/orderFile'
        var title = '上传原图文件'
        if(type == 1){
            title= '上传原图文件'
            url = '/apis/upload/orderFile'
        }else if (type == 2){
            title= '上传附件文件'
            url='/apis/upload/orderAttachFile'
        }
        document.title = title
        $('.title_span').html(title)
        $('#fileType').html(title)
        $('#orderName').val(orderName)
        $('#orderCode').val(orderCode)
        var uploader = new plupload.Uploader({
            // $("#uploader").plupload({
            runtimes: 'html5,flash,silverlight,html4',//这里可以不写,plupload默认支持
            url: url,//上传后台请求路径
            browse_button: 'uploader',
            filters: {
              mime_types: [
                {title: "图片文件", extensions: "jpg,jpeg,png,bmp,cdr"}
              ],
              max_file_size: '5mb'//用来限制单个文件大小的
            },
            multi_selection: false,//默认支持多文件上传,false不支持 multi_selection: false,
            flash_swf_url: '/swf/Moxie.swf',
            silverlight_xap_url: '/swf/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
            dragdrop: true,
            chunk_size: '1mb',//是否将上传文件进行分片,0代表是不分
            init: {
                BeforeUpload(up, file) {
                    console.log(file);
                    up.setOption('multipart_params', {
                        'supplierCode':supplierCode,
                        'dataSourceId':dataSourceId,
                        'idUser':idUser,
                        'srcfilename': file.name,
                        'idOrder': orderId,
                        'orderCode': orderCode
                    })
                },
                UploadProgress(up, files) {
                    console.log('UploadProgress',files)
                        console.log('上传')
                    $('#progress1').html(`
    <div class="progress-bar" role="progressbar" aria-valuenow="60"
        aria-valuemin="0" aria-valuemax="100" style="width: ${files.percent}%;">
        <span class="sr-only">完成 ${files.percent}% </span>
    </div>`)
                },
                FileUploaded(up, file, info) {
                    console.log(info);
                    if (info.status === 200) {
                        alert('上传成功')
                        up.refresh()
                    }
                },
                FilesAdded(up, files) {
                    // console.log('up', up);
                    console.log('FilesAdded', files)
                    var html = ''
                    if(files.length>0){
                        $('.tableDiv').show()
                    }
                    for (let i = 0; i < files.length; i++) {
                        html += `<tr>
                <td style="width: 200px">${files[i].name}</td>
                <td><div class="progress" id="progress1">
</div></td>
            </tr>`
                    }

                    $('#tableBody').html(html)
                },
                Error(up, args) {
                    alert(args.response)
                }
            }
        });
        //在实例对象上调用init()方法进行初始化
        uploader.init();

        // //给"开始上传"按钮注册事件
        $('#startUpload').click(function (){
            console.log('点击了');
            uploader.start();
        })
    })

    //取 url 参数函数
    function query(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return decodeURIComponent(pair[1]);
            }
        }
        return (false);
    }
</script>
</body>
</html>