通过AngularJS实现图片上传及缩略图展示示例

网络编程 2024/11/15 佚名

3 2 1

通过AngularJS实现图片上传及缩略图展示示例，废话不多说了，具体如下：

从项目中截出的代码

HTML部分：

<section>
  <img src="/UploadFiles/2021-04-02/tuijian_banner.png">

JS部分：


Module.controller('controlName', ['$scope', '$http', function($scope, $http) {
  $scope.reader = new FileReader();  //创建一个FileReader接口
  $scope.form = {   //用于绑定提交内容，图片或其他数据
    image:{},
  };
  $scope.thumb = {};   //用于存放图片的base64
  $scope.thumb_default = {  //用于循环默认的‘加号'添加图片的框
    1111:{}
  };

  $scope.img_upload = function(files) {    //单次提交图片的函数
    $scope.guid = (new Date()).valueOf();  //通过时间戳创建一个随机数，作为键名使用
    $scope.reader.readAsDataURL(files[0]); //FileReader的方法，把图片转成base64
    $scope.reader.onload = function(ev) {
      $scope.$apply(function(){
        $scope.thumb[$scope.guid] = {
          imgSrc : ev.target.result, //接收base64
        }
      });
    };
    
    var data = new FormData();   //以下为像后台提交图片数据
    data.append('image', files[0]);
    data.append('guid',$scope.guid);
    $http({
      method: 'post',
      url: '/comm/test-upload.php"//img.jbzj.com/file_images/article/201701/201713151322829.png" alt="" />

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