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


Posted in Javascript onJanuary 03, 2017

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

从项目中截出的代码

HTML部分:

<section>
  <img src="image/user-tuijian/tuijian_banner.png" />
  <div>
    <form ng-submit="submit_form()">
      <input type="text" name="aaa" placeholder="商品名称:" ng-model="form.goods_name" />
      <input type="text" name="bbb" placeholder="商品网址:" ng-model="form.goods_url" />
      <textarea placeholder="您宝贵的留言就是我们前进的动力!" ng-model="form.user_msg"></textarea>
      <div>
        <div ng-repeat="item in thumb">
        <!-- 采用angular循环的方式,对存入thumb的图片进行展示 -->
          <label>
            <img ng-src="{{item.imgSrc}}"/>
          </label>
          <span ng-if="item.imgSrc" ng-click="img_del($index)"></span>
        </div>
        <div ng-repeat="item in thumb_default">
        <!-- 这里之所以写个循环,是为了后期万一需要多个‘加号'框 -->
          <label>
            <input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>
          </label>
        </div>
      </div>
      <p>(*^_^*)请详细描述您的需求,有助于我们快速定位并解决问题,希望我们的产品和服务能得到您的肯定。</p>
      <input type="submit" name="" value="提 交" />
    </form>
  </div>
</section>

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?action=success',
      data:data,
      headers: {'Content-Type': undefined},
      transformRequest: angular.identity
    }).success(function(data) {
      if (data.result_code == 'SUCCESS') {
        $scope.form.image[data.guid] = data.result_value;
        $scope.thumb[data.guid].status = 'SUCCESS';
        console.log($scope.form)
      }
      if(data.result_code == 'FAIL'){
        console.log(data)
      }
    })
  };

  $scope.img_del = function(key) {  //删除,删除的时候thumb和form里面的图片数据都要删除,避免提交不必要的
    var guidArr = [];
    for(var p in $scope.thumb){
      guidArr.push(p);
    }
    delete $scope.thumb[guidArr[key]];
    delete $scope.form.image[guidArr[key]];
  };
  $scope.submit_form = function(){  //图片选择完毕后的提交,这个提交并没有提交前面的图片数据,只是提交用户操作完毕后,











到底要上传哪些,通过提交键名或者链接,后台来判断最终用户的选择,整个思路也是如此
    $http({
      method: 'post',
      url: '/comm/test.php',
      data:$scope.form,
    }).success(function(data) {
      console.log(data);  
    })
  };
}]);

最后的效果如图:

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

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

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

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
vue中的provide/inject的学习使用
May 09 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 #Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 #Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 #Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 #Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 #Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
JavaScript学习笔记之基础语法
2015/01/22 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Django REST 异常处理详解
2020/07/15 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
数据库的约束含义
2012/09/09 面试题
大三自我鉴定范文
2013/10/05 职场文书
出纳的岗位职责
2013/11/09 职场文书
机械制造与自动化应届生求职信
2013/11/16 职场文书
出纳岗位职责模板
2013/11/27 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
文明倡议书
2015/01/19 职场文书
灵魂歌王观后感
2015/06/17 职场文书
爱国主义影片观后感
2015/06/18 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis