hdjs
Version:
hdjs framework
107 lines (106 loc) • 3.54 kB
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">
<script>
window.hdjs = {};
window.hdjs.base = '../';
window.hdjs.uploader = 'php/uploader.php?';
window.hdjs.filesLists = 'php/filesLists.php?';
</script>
<script src="../amd/require.js"></script>
<script src="../amd/config.js"></script>
</head>
<body style="padding: 50px;">
<h1>单图上传</h1>
<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="../dist/static/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']);
//上传图片
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>
<h1 style="clear: both;margin-top: 200px;">多图上传</h1>
<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-default" 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>
<h1 style="clear: both;margin-top: 100px;">移动端上传</h1>
<button onclick="upImage()" class="btn btn-default">选择图片</button>
<script>
//上传图片
function upImage() {
require(['hdjs'], function (hdjs) {
var options = {
multiple: false,//是否允许多图上传
//data是向后台服务器提交的POST数据
data: {name: '后盾人', year: 2099},
compress: {
width: 1600,
height: 1600,
}
};
hdjs.image(function (images) {
console.log(images[0])
}, options)
});
}
</script>
</body>
</html>