angular js +bootstrap-fileinput 照片上传

发布时间：2020-12-17 10:04:50 所属栏目：安全来源：网络整理

导读：Freemarker： script src="${base}/vender/bootstrap-fileinput-master/js/fileinput.js"/script script src="${base}/vender/bootstrap-fileinput-master/js/fileinput_locale_zh.js"/script div class="form-group" label class="col-sm-2 control-label"介

Freemarker：
<script src="${base}/vender/bootstrap-fileinput-master/js/fileinput.js"></script>
<script src="${base}/vender/bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>

<div class="form-group">
<label class="col-sm-2 control-label">介绍图片 </label>
<div class="col-sm-7">
<input type="text" class="form-control"
data-ng-model="searchInfo.introductionPhoto" readonly>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> </label>
<div class="col-sm-7">
<div style="float: inline;">
<div style="float: left;">
<input id="fileupload" name="picture" type="file"
class="file-loading ">
</div>
<label class="control-label" style="padding-left: 10px;">{{originalfileName}}</label>
</div>
</div>

</div>

js：

var playbackId =$("#playbackId").val();

//TODO 文件上传(图片)

$("#fileupload").fileinput({
language : 'zh',
uploadUrl : "find/fileUpload",
uploadAsync : false,
showCaption: false,
showPreview : true,
showUpload : false,
showRemove : false,
allowedFileExtensions : [ 'png','jpg' ],
elErrorContainer : '#export_error'
}).on("filebatchselected",function(event,files) {
$("#fileupload").fileinput("upload");
}).on('filebatchuploadsuccess',data) {
if (data.response.status != 0) {
$scope.error="封面上传失败！";
return;

}

$scope.$apply(function() { $scope.searchInfo.introductionPhoto= data.response.introductionPhoto; }); });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!