angular js +bootstrap-fileinput 照片上传

前端之家收集整理的这篇文章主要介绍了angular js +bootstrap-fileinput 照片上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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; }); });

猜你在找的Angularjs相关文章