# 图片上传 参考文档: [http://fex.baidu.com/webuploader] [TOC] ## 单图上传  ``` <div class="col-sm-10"> <div class="input-group"> <input class="form-control" name="thumb" readonly="" value=""> <div class="input-group-btn"> <button onclick="upImagePc(this)" class="btn btn-default" type="button">选择图片</button> </div> </div> <div class="input-group" style="margin-top:5px;"> <img src="../dist/static/image/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> 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> ``` ## 多图上传  ``` <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> ``` ## 移动端上传 模态框默认宽度700px,移动端需要使用百分比单位，下面除了增加了width选项外，其他与图片上传没有区别 ``` <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> ```