# 图片上传 参考文档: [http://fex.baidu.com/webuploader] [TOC] ## 组件参数 下面介绍上传时可定义的参数 | 属性 | 说明 | 示例| | --- | --- |--- | | width | 弹窗宽度 | width:'100%' | extensions | 可使用扩展名 |extensions: 'gif,jpg,jpeg,png', | | multiple | 多图上传 | multiple:true | | fileSizeLimit | 允许上传文件总大小（字节） | fileSizeLimit: 200 * 1024 * 1024 , 默认200MB | | fileSingleSizeLimit | 允许上传单个文件大小（字节） | fileSingleSizeLimit: 20 * 1024 * 1024，默认2MB | |compress | 压缩图片 | compress:{ width: 1600,height: 1600} | |data|POST数据|data:{name:'后盾人',year:2099}| |server| 后台上传地址|默认为hdjs的window.hdjs.uploader 配置项| ## 单图上传  ``` <div class="col-sm-8"> <div class="input-group mb-1"> <input class="form-control form-control-sm" name="thumb" readonly="" value=""> <div class="input-group-append"> <button onclick="upImagePc(this)" class="btn btn-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> ``` ## 多图上传  ``` <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> ```