通过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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
详细分析Node.js 多进程
Jun 22 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
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
linux下php上传文件注意事项
2016/06/11 PHP
js简易namespace管理器 实例代码
2013/06/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python Map 函数的使用
2020/08/28 Python
蔬菜基地的创业计划书
2014/01/06 职场文书
给交警的表扬信
2014/01/12 职场文书
施工安全责任书范本
2014/07/24 职场文书
迟到检讨书范文
2015/01/27 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android