通过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="" />

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

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

标签:
angularjs,缩略图展示, angularjs的上传图片,angularjs,图片展示

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com