Angularjs实现多图片上传预览功能

下面是关于AngularJS实现多图片上传预览功能的详细攻略：

1. 环境准备

在开始实现多图片上传预览功能前，需要确保以下环境已准备好：

1. AngularJS框架；
2. HTML和CSS基本知识；
3. 文件上传插件jQuery File Upload；
4. 一些基本的javascript和jQuery知识。

2. 实现步骤

第1步：引入jQuery和AngularJS框架

首先，在页面头部引入jQuery和AngularJS框架：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<!-- 引入AngularJS -->
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

第2步：引入jQuery File Upload插件

接着，在页面中引入jQuery File Upload插件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/blueimp-file-upload/9.28.0/css/jquery.fileupload.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>

第3步：创建上传控件

然后，在页面上创建一个用于上传图片的控件：

<input type="file" name="files[]" multiple>

第4步：建立AngularJS应用

在页面中下方建立一个AngularJS应用，并将文件上传控件封装成一个指令，如下：

<div ng-app="uploadApp" ng-controller="uploadCtrl">
    <div file-upload></div>
</div>
<script>
var app = angular.module('uploadApp', []);

app.directive('fileUpload', function () {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            // 通过jQuery File Upload插件创建上传控件
            element.fileupload({
                url: 'upload.php',
                dataType: 'json',
                done: function (e, data) {
                    // 上传成功后预览图片
                    $.each(data.result.files, function (index, file) {
                        $('<img>').attr({
                            src: file.url,
                            width: 150
                        }).appendTo('#preview');
                    });
                }
            });
        }
    };
});

app.controller('uploadCtrl', function ($scope) {

});
</script>

第5步：编写CSS样式

最后，在页面中加入一些CSS样式，以便预览上传的图片。将以下代码加入页面样式中：

#preview img {
    margin-right: 10px;
    margin-bottom: 10px;
}

这样就可以实现多图片上传预览功能了。上传的图片会被自动显示在页面上，供用户查看。

3. 示例说明

示例1：单文件上传预览

在文件上传控件上添加一个事件，监听文件的上传过程，获得文件上传所需要的信息，然后通过这些信息，即可预览上传的图片：

$(document).ready(function () {
    var fileUpload = document.getElementById("fileUpload");
    var filePath = document.getElementById("filePath");
    var image = document.getElementById("image");

    fileUpload.onchange = function () {
        var reader = new FileReader();
        reader.onload = function (e) {
            if( reader.readyState == FileReader.DONE) {
                image.src = String(e.target.result);
            }
        }
        reader.readAsDataURL(fileUpload.files[0]);
        filePath.value = fileUpload.value;
    }
});

通过以上代码实现上传的图片可以在上传前就可以预览，大大增加了用户的交互体验。

示例2：多文件上传预览

与上面的实例类似，在上传控件监听上传的整个过程，将所需要的文件信息拼接成表格，通过这个表格将上传的文件预览出来：

$(document).ready(function () {
    var fileUpload = document.getElementById("fileUpload");
    var filesTable = document.getElementById("filesTable");

    fileUpload.onchange = function () {
        filesTable.innerHTML = "";
        for (var i = 0; i < fileUpload.files.length; i++) {
            var fileName = fileUpload.files[i].name;
            var fileSize = BytesToSize(fileUpload.files[i].size);
            var row = '<tr><td>' + fileName + '</td><td>' + fileSize + '</td></tr>';
            $(row).appendTo(filesTable);
        }
    }
});

function BytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    var k = 1024;
    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    var i = Math.floor(Math.log(bytes) / Math.log(k));
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

经过以上代码实现之后，上传的文件将被自动以表格形式展示在页面上，提高了用户的交互体验。