hdjs
Version:
hdjs framework
82 lines • 2.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
window.hdjs = {};
window.hdjs.base = '../';
window.hdjs.uploader = 'php/uploader.php?';
window.hdjs.filesLists = 'php/filesLists.php?';
</script>
<script src="../require.js"></script>
<script src="../config.js"></script>
</head>
<body style="padding: 50px;">
<div class="col-sm-10">
<div class="input-group mb-1">
<input class="form-control" name="thumb" readonly="" value="">
<div class="input-group-append">
<button onclick="upImagePc(this)" class="btn btn-outline-secondary" type="button">单图上传</button>
</div>
</div>
<div style="display: inline-block;position: relative;">
<img src="../image/nopic.jpg" class="img-responsive img-thumbnail" width="150">
<em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
onclick="removeImg(this)">×</em>
</div>
</div>
<script>
require(['hdjs','bootstrap']);
//上传图片
function upImagePc() {
require(['hdjs'], function (hdjs) {
var options = {
multiple: false,//是否允许多图上传
//data是向后台服务器提交的POST数据
data: {name: '后盾人', year: 2099},
};
hdjs.image(function (images) {
//上传成功的图片，数组类型
$("[name='thumb']").val(images[0]);
$(".img-thumbnail").attr('src', images[0]);
}, options)
});
}
//移除图片
function removeImg(obj) {
$(obj).prev('img').attr('src', '../dist/static/image/nopic.jpg');
$(obj).parent().prev().find('input').val('');
}
</script>
<hr>
<style>
#box img {
width: 200px;
float: left;
margin-right: 10px;
border: solid 1px #999;
padding: 10px;
height: 200px;
}
</style>
<button onclick="upImageMul(this)" class="btn btn-success mb-3" type="button">多图上传</button>
<div id="box"></div>
<script>
require(['hdjs']);
//上传图片
function upImageMul(obj) {
require(['hdjs'], function (hdjs) {
hdjs.image(function (images) {
$(images).each(function (k, v) {
$("<img src='" + v + "'/>").appendTo('#box');
})
}, {
//上传多图
multiple: true,
})
});
}
</script>
</body>
</html>