# 圖片上傳 參考文檔: [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> ```