```
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 最新版本的 Bootstrap 核心 jquery 文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<script src="/js/hdjs/js/vue.js"></script>
<script>
//HDJS组件需要的配置
hdjs = {
'base': '/js/hdjs', //上传组件目录
'uploader': "{:url('/component/upload/uploader')}", //上传路由
'filesLists': "{:url('/component/upload/filesLists')}?",//获取上传的文件
'ossSign': "{:url('system/component/sign')}?",//上传文件到阿里云oss
};
</script>
<script src="/js/hdjs/app/util.js"></script>
<script src="/js/hdjs/require.js"></script>
<script src="/js/hdjs/config.js"></script>
<title>文件上传</title>
</head>
<body>
<form action="/index/index/file" method="post" class="form-horizontal" role="form">
<h1 class="text-center">文件上传</h1>
<div class="container">
<div class="form-group">
<label for="inputID" class="col-sm-2 control-label">单图上传</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" name="list_image" value="">
<div class="input-group-btn">
<button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
</div>
</div>
<div class="input-group" style="margin-top:5px;">
<img src="/js/hdjs/nopic.jpg" class="img-responsive img-thumbnail" width="150">
<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
onclick="removeImg(this)">×</em>
</div>
</div>
<script>
//上传图片
function upImage(obj) {
require(['util'], function (util) {
options = {
multiple: true,//是否允许多图上传
};
util.image(function (images) { //上传成功的图片，数组类型
$("[name='list_image']").val(images[0]);
$(".img-thumbnail").attr('src', images[0]);
}, options)
});
}
//移除图片
function removeImg(obj) {
$(obj).prev('img').attr('src', '/static/images/nopic.jpg');
$(obj).parent().prev().find('input').val('');
}
</script>
</div>
<br>
<br>
<div class="form-group" style="padding-left:120px">
<label for="inputID" class=" control-label">多图上传:</label>
<style>
#box img {
width: 200px;
float: left;
margin-right: 10px;
border: solid 1px #999;
padding: 10px;
height: 200px;
}
#box .bb {
width: 220px;
/*margin-left: 100px;*/
float: left;
margin-right: 10px;
border: solid 1px #999;
padding: 10px;
height: 240px;
}
</style>
<button onclick="upImages(this)" class="btn btn-default" type="button">选择图片</button>
<div id="box"></div>
<script>
//上传图片
function upImages(obj) {
require(['util'], function (util) {
util.image(function (images) {
$(images).each(function (k, v) {
//增加appendTo('#box')方法在被选元素的结尾（仍然在内部）插入指定内容
$("<div class='bb'><img src='" + v + "'/><button class='btn btn-danger btn-xs' style='margin-top:5px' onclick='removeImg(this)'>删除</button><textarea name='content_images[]' hidden cols='30' rows='10' >" + v + "</textarea></div>").appendTo('#box');
})
}, {
//上传多图
multiple: true,
})
});
}
//移除图片
function removeImg(obj) {
// 删除父级元素
$(obj).parent('.bb').detach();
// 删除prev获得匹配元素集合中每个元素紧邻的前一个同胞元素
$(obj).prev('textarea').detach();
}
</script>
</div>
<div class="form-group">
<label for="inputID" class="col-sm-2 control-label">百度编辑器:</label>
<div class="col-sm-10">
<textarea id="container" name="content"></textarea>
<script>
util.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
//这是回调函数 editor是百度编辑器实例
});
</script>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">文件上传:</label>
<div class="col-sm-10">
<div class="panel panel-default" id="app">
<div class="panel-heading">
<h3 class="panel-title">多文件上传</h3>
</div>
<div class="panel-body">
<div class="panel panel-default" v-for="(v,k) in videos">
<div class="panel-body">
<div class="form-group">
<label for="" class="col-sm-2 control-label">文件地址</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" name="path" v-model="v.path">
<span class="input-group-btn">
<button class="btn btn-default" type="button" :id="v.id">上传文件</button>
</span>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-success btn-sm" @click.prevent="del(k)">重新选择</button>
</div>
<div class="col-sm-8" :id="'percentage'+v.id" hidden="hidden">
上传进度 <b></b>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-default" @click.prevent="add">添加文件</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="inputID" class="col-sm-2 control-label">单文件上传</label>
<div class="col-sm-10">
<div class="input-group">
<input type="text" class="form-control" name="file" value="">
<div class="input-group-btn">
<button class="btn btn-default" id="pickVideo" type="button">选择文件</button>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
require(['vue'], function (Vue) {
new Vue({
el: '#app', //抓元素
data: {
videos: [
// {title: '', path: ''} //数据
]
},
methods: { //方法
add: function () {
var field = {title: '', path: '', id: 'hd' + Date.parse(new Date())};
this.videos.push(field);
setTimeout(function () {
upload(field);
}, 200)
},
del: function (k) {
this.videos.splice(k, 1);
}
}
})
});
function upload(field) {
require(['oss'], function (oss) {
var id = '#' + field.id;
var uploader = oss.upload({
//获取签名
serverUrl: "{:url('component/upload/sign')}?",
//上传目录
dir: 'video/',
//按钮元素
pick: id,
accept: {
title: '',
// extensions: 'mp4',
// mimeTypes: 'video/mp4'
}
});
//上传开始
uploader.on('startUpload', function () {
console.log('开始上传');
});
//上传成功
uploader.on('uploadSuccess', function (file, response) {
field.path = oss.oss.host + '/' + oss.oss.object_name;
console.log('上传完成,文件名:' + oss.oss.host + '/' + oss.oss.object_name);
});
//上传中
uploader.on('uploadProgress', function (file, percentage) {
$("#percentage" + field.id).show().find('b').text(parseInt(percentage * 100) + '%');
console.log('上传中,进度:' + parseInt(percentage * 100));
})
//上传结束
uploader.on('uploadComplete', function () {
$("#percentage" + field.id).hide();
console.log('上传结束');
})
});
}
</script>
<script>
function uploadFile() {
require(['oss'], function (oss) {
var id = '#pickVideo';
var uploader = oss.upload({
//获取签名
serverUrl: "{:url('component/upload/sign')}?",
//上传目录
dir: 'file/test/',
//按钮元素
pick: id
});
//上传开始
uploader.on('startUpload', function () {
console.log('开始上传');
});
//上传成功
uploader.on('uploadSuccess', function (file, response) {
console.log('上传完成,文件名:' + oss.oss.host + '/' + oss.oss.object_name);
});
//上传中
uploader.on('uploadProgress', function (file, percentage) {
console.log('上传中,进度:' + parseInt(percentage * 100));
})
//上传结束
uploader.on('uploadComplete', function () {
console.log('上传结束');
})
});
}
uploadFile();
</script>
</body>
</html>
```
