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