AngularJS Bootstrap实现多文件上传和管理

最近有一个项目需要实现多文件上传管理，这个项目是基于bootstrap开发的，所以在查看了一些bootstrap文件上传插件后发现bootstrap-fileinput是最漂亮的，可以实现多文件上传管理(插件官方地址：http://plugins . krajee.com/file-input)，具体效果如下：

(bootstrap-fileinput不限于图片上传，还可以实现文件上传，但是图片的缩略图很容易识别，这里有一个图片上传的例子)

这个插件的基本操作请参考JS文件上传工件bootstrap fileinput的详细说明。本文主要研究多文件管理。

在讨论如何使用插件之前，我们先来谈谈项目中图片管理的需求：

1.你可以上传多张图片

2.仅当单击保存按钮时，图片信息才会保存到数据库中

3.您可以加载已保存到数据库中的图片信息，并提供删除功能

因此，我们可以指定几种文件状态：

选中：已放入插件，但未上传到服务器。上图第三张，图片下方有一个上传按钮。

上传：已经上传到服务器，但是图片信息还没有保存到数据库。上图第二张，图片下方有一个100%进度条。

保存：图片信息已经保存到数据库中的图片，如上图第一张图片所示。这些图片下面有一个删除按钮。单击删除从数据库中删除图片信息。

首先，介绍必要的文件

link href=' %=path %/static/CSS/bootstrap-3 . 3 . 5/bootstrap . min . CSS ' rel='样式表' link href=' %=path %/static/CSS/bootstrap-3 . 3 . 5/file input . CSS ' rel='样式表' script src=' http :%=path %/static/js/jquery-1 . 11 . 3 . js '/script script src=' http 3360%=path %/static/js/js

二、多文件上传

首先，在页面中定义文件控件：

输入id=' input-images ' type=' file ' multiple class=' file-loading ' accept=' image/* '

然后初始化控件，可以上传组件的多个文件：

$('#input-images ')。file input({ uploadurl :%=path % ' '/album/picturefile upload '，allowedfilextensions 3360[' jpg '，' png '，' gif']，resizePreference: 'height '，maxFileCount: 10，language: 'zh '，overwriteInitial: false，resizeImage: true，})；当然初始化的时候有很多属性，这里就不介绍了。背景代码(使用JFinal)如下：

public void picturefile upload(){ UploadFile UploadFile=getFile()；renderJson(' { \ ' link ' : ' ' \ '/file input/uploadfile . getfilename()' \ ' '，\ ' fileName ' : \ ' ' uploadfile . getoriginalfilename()' \ ' } ')；}请注意，即使返回空的json字符串(“{}”)并且返回值保存在前台数据中，也必须在最后返回Json。

三.加载和删除现有文件

加载现有文件是指在该控件中显示服务器上的现有文件，实现文件管理并提供删除功能，主要依靠initialPreview。

获取服务器上的文件名和文件地址后，使用initial review initial review config完成加载和定义删除操作：

var initPreview=new Array()；//显示元素var initpreview config=new Array()；//显示设置$。post(' %=path % ' '/album/getpicsbyalbumm '，{illuminad:albumind}，function(result){ for(var I=0；iresult.lengthI){ var PictureFile=result[I]；//用于显示上传的图片init preview . push(' img src=' picturefile . picaddress ' ' class=' file-preview-image ' alt=' picturefile . picname ' ' title=' picturefile . picname ' ')；var config=新对象()；config.caption=pictureFile。PICNAMEconfig.url=' %=路径% ' '/相册/deletePicById '；config.key=pictureFile。身份证；initpreview config . push(config)；} InitFileInput($作用域)；$('#input-images ')。fileinput('refresh '，{ initialpreview : initPreview，initialpreviewconfig : initPreview config })；} );点击删除图标，配置中的键值默认会传到后台，可以在后台定义deletePicById方法：

public void deletePicById(){ String picId=getPara(' key ')；service . deletepicbyid(integer . value of(picId))；renderJson(' { } ')；}四。一些问题的答案

1.为什么相关属性可以显示在前端，而模型中没有属性？这里主要使用JFinal的ActiveRecord函数，不需要定义属性和setter、getter方法。属性值在模型中的attrs中映射。这个属性是键和值的键值对，而键、值是数据库的字段名。特别提醒：虽然SQL语句没有区分大小写，但是字段名还是有大小写的。如果字段名大写，则映射到模型的键也大写，默认id为主键的JFinal策略不会生效。需要在configPlugin中设置，如下：ARP。添加映射('图片'，'标识'，图片.类)。建议您根据Java命名标准来命名它们

2.在中初始化文件输入(参考代码)。为什么要执行清除和破坏操作？

FileInput插件选择文件后会将文件保留在文件字段中，不管是否上传，所以再次点击时会显示最后选择的文件，不符合多相册管理的要求。原本以为可以通过clear操作清空文件字段(官方文件是这么说的)，但在实际操作中发现没有清空，于是调用clear和destory，然后重新初始化文件上传控件。(这个我不太清楚，希望有大神指点)

3.保存时如何知道哪些图片需要存储在数据库中？这个实现的基础是什么？

$scope上有一个selectedPics数组，负责保存将要保存到数据库的文件。文件被选中后，选中的文件信息会保存到这个数组中，但是hasUpload属性为false；文件上传后，对应的hasUpload会修改为true；上传成功后删除(尚未保存到数据库)将从数组中删除相应的元素。有人可能会问，如果选择一个文件，不上传直接删除，文件信息会不会占用数据位置，导致元素混乱？其实在fileuploaded事件中，哪些图片已经被hasUpload了，直接改变数组对应位置的元素的值，通过图片所在DIV的data-fileindex属性值得到数组坐标，始终会增加，不会替换空值，也不会因为删除图片而改变，只是对应于selectedPics数组。var idx=$('#' previewId)。attr(' data-file index ')；例如，我选择了三张图片，这三张图片目前没有上传，它们的数据文件索引依次是0、1和2。当我删除中间的图片并重新选择一张新图片时，它们的数据文件索引将变成0、2和3。

动词（verb的缩写）代码参考我最后才学了AngularJS。代码写得不好。如果有什么问题，请留言。示例代码在文章的最后，数据库脚本是files.sql(MySQL)。请阅读更多代码。

源代码下载：http://xiaozai.jb51.net/201611/yuanma/bsfileinput(jb51.net)

如果你还想深入学习，可以点击这里学习，然后附上两个精彩的话题给你：Bootstrap学习教程Bootstrap实用教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。