# 單圖上傳 > 需要創建數據表 參考 system/upload.php文件中的說明 參考文檔: [http://fex.baidu.com/webuploader](http://fex.baidu.com/webuploader)  ## 使用 ``` <div class="col-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="thumb" readonly="" value=""> <div class="input-group-btn"> <button onclick="upImage(this)" class="btn btn-default" type="button">選擇圖片</button> </div> </div> <div class="input-group" style="margin-top:5px;"> <img src="resource/images/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> //上傳圖片 function upImage(obj) { require(['util'], function (util) { options = { multiple: false,//是否允許多圖上傳 data:'', hash:1 //hash為確定上傳文件標識（可以以用戶編號，標識為此用戶上傳的文件，系統使用這個字段值來顯示文件列表），data為數據表中的data字段值，開發者根據業務需要自行添加 }; util.image(function (images) {? //上傳成功的圖片，數組類型? $("[name='thumb']").val(images[0]); $(".img-thumbnail").attr('src', images[0]); }, options) }); } //移除圖片? function removeImg(obj) { $(obj).prev('img').attr('src', 'resource/images/nopic.jpg'); $(obj).parent().prev().find('input').val(''); } </script> ``` # 多圖上傳 ``` <button onclick="upImage(this)" class="btn btn-default" type="button">選擇圖片</button> <div id="box"></div> <script> //上傳圖片 function upImage(obj) { require(['util'], function (util) { options = { //上傳多圖 multiple: true,? }; util.image(function (images) {? $(images).each(function(k,v){ $("<img src='"+v+"'/>").appendTo('#box'); }) }, options) }); } </script> ```