AngularJS+Bootstrap实现多文件上传与管理

$scope上有个selectedPics数组，该属性负责保存最终那些文件会保存到数据库。在文件选择后会将选择待文件信息保存到这个数组中，但hasUpload属性为false；在文件上传后，会修改对应的hasUpload为true；在上传成功后执行删除（还没有保存到数据库）会从数组中移除对应的元素。有人会问，那选择文件后不上传直接删除，那文件信息岂不是会占用数据位置从而导致元素错乱吗？其实并不会，在fileuploaded事件中，哪些图片已经hasUpload，是直接改数组对应位置元素的值的，而数组坐标是通过图片所在DIV的data-fileindex属性值获得的， 该值会一直增加，不会替补空缺值，不会因为删除图片而变动，正好与selectedPics数组相对应。
var idx = $("#"+previewId).attr("data-fileindex");
例如我选择了3张图片，此时没有上传，他们依次的data-fileindex为0，1，2，当我删除中间那个图片并重新选择新图片时，那么他们的data-fileindex就会变为0，2，3。

五、代码参考
最后本人才学AngularJS，代码写的不够纯熟，如有不妥之处，欢迎大家留言，示例代码在文章末尾，数据库脚本为files.sql（MySQL），大家多看看代码吧。

源码下载：http://xiazai.jb51.net/201611/yuanma/BSfileinput(jb51.net).rar

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

（编辑：源码网）

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