|
|
@@ -0,0 +1,189 @@
|
|
|
+<!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',
|
|
|
+ max_file_size: '3000mb',//用来限制单个文件大小的
|
|
|
+ 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: '2mb',//是否将上传文件进行分片,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>
|
jlutt@163.com
