通过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 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
javascript中的继承实例代码
Apr 27 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
js数组方法reduce经典用法代码分享
Jan 07 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
JavaScript中变量提升机制示例详解
Dec 27 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
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python文件操作基础流程解析
2020/03/19 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
环保倡议书500字
2014/05/15 职场文书
高三励志标语
2014/06/05 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2015年底工作总结范文
2015/05/15 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
工作简报格式范文
2015/07/21 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python