angular js +bootstrap-fileinput 照片上传

最新推荐文章于 2025-05-28 10:21:49 发布

原创最新推荐文章于 2025-05-28 10:21:49 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

angular Js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用Freemarker模板引擎实现的文件上传功能，支持图片类型的文件，并能够实时预览所选图片。该应用通过前端界面接收用户上传的文件，并通过后端接口完成文件的存储及返回图片路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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', function(event, data) {
if (data.response.status != 0) {
$scope.error="封面上传失败！";
return;

}

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