Angularjs实现上传图片预览功能

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<input type="file" ng-file-select="onFileSelect($files)" accept="image/*">
app.factory("fileReader", function($q, $log) {
      var onLoad = function(reader, deferred, scope) {
        return function () {
          scope.$apply(function () {
            deferred.resolve(reader.result);
          });
        };
      };
      var onError = function (reader, deferred, scope) {
        return function () {
          scope.$apply(function () {
            deferred.reject(reader.result);
          });
        };
      };
      var onProgress = function(reader, scope) {
        return function (event) {
          scope.$broadcast("fileProgress",
              {
                total: event.total,
                loaded: event.loaded
              });
        };
      };
      var getReader = function(deferred, scope) {
        var reader = new FileReader();
        reader.onload = onLoad(reader, deferred, scope);
        reader.onerror = onError(reader, deferred, scope);
        reader.onprogress = onProgress(reader, scope);
        return reader;
      };
      var readAsDataURL = function (file, scope) {
        var deferred = $q.defer();
        var reader = getReader(deferred, scope);
        reader.readAsDataURL(file);
        return deferred.promise;
      };
      return {
        readAsDataUrl: readAsDataURL
      };
  });

选择图片后执行的方法

$scope.onFileSelect = function(files) {
      var fileIn=files[0];
      var img = new Image();
      var fileType = fileIn.name.substring(fileIn.name.lastIndexOf(".") + 1, fileIn.name.length);
      if(fileIn.size>5242880){//单位是B，此处不允许超过5M
        alert("图片不能超过5M")
        return;
      }
      if(fileType=='JPG' || fileType=='PNG' || fileType=='JPEG ' || fileType=='jpg' || fileType=='png' || fileType=='jpeg'){
      }else{
        alert("图片格式只支持:JPG,PNG,JPEG")
        return;
      }
      fileReader.readAsDataUrl(fileIn, $scope)
          .then(function(result) {
            $scope.imageSrc = result;
            console.log(img.width);
      });
    }

总结

以上所述是小编给大家介绍的Angularjs实现上传图片预览功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • angularjs实现简单的购物车功能

    本文实例为大家分享了angularjs实现购物车功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; margin-left: 10px; } li{ list-

  • AngularJS 打开新的标签页实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angularJS-打开新的标签页</title> <script type="text/javascript" src="js/angular.min.js

  • 基于AngularJS的简单使用详解

    Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope

  • AngularJs 延时器、计时器实例代码

    1.$timeout延时器 apptest.controller("main",function($scope,$timeout){ $scope.pink="pink"; $scope.box="第二个盒子"; $timeout(function(){ $scope.pink="第一个盒子内容,延迟两秒后改变了"; },2000); setTimeout(function(){ $scope.pink="第一个盒子

  • 详解angularJS+Ionic移动端图片上传的解决办法

    详解angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

  • 详解angularjs popup-table 弹出框表格指令

    本文主要介绍了angularjs popup-table 弹出框表格指令,分享给大家,具体如下: //表格处理 app.directive('popupTable', ['$http', '$rootScope', '$cookies', '$location', function ($http, $rootScope, $cookies, $location) { return { restrict: 'E', templateUrl: 'popuptable_templete.html',

  • AngularJS 仿微信图片手势缩放的实例

    AngularJS 仿微信图片手势缩放的实例

    AngularJS 仿微信图片手势缩放的实例 前言: 最近,公司做一个混合应用项目,涉及到一个图片缩放功能,类似微信那样支持touch事件. 亲测,实现方案很不错,所以放出来,和大家分享一下,希望有人能用得到. 核心思想就是用到了CSS3的transform属性, 不多说,我们看代码: 'use strict'; /** * @ngInject */ module.exports = function () { var _directive = { restrict : 'A', scope :

  • Angularjs实现上传图片预览功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <input type="file" ng-file-select="onFileSelect($files)" accept="image/*"> app.factory("fileReader", function($q, $log) { var onLoad = function(reader, deferred, scope) { return func

  • 简单实现JS上传图片预览功能

    js实现上传图片预览功能思路是获取上传图片本地路径,再加载到页面中实现上传预览 HTML代码 <div class="upload"> <input type="button" class="btn" onclick="browerfile.click()" value="上传"> <input type="file" id="browerfile

  • JavaSctit 利用FileReader和滤镜上传图片预览功能

    JavaSctit 利用FileReader和滤镜上传图片预览功能

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据. 1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. 2.FileReader接口事件 FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态. 重点介绍下:readAsDataU

  • JS中利用FileReader实现上传图片前本地预览功能

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下. 之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象 当用input标签上传图片时event对象中会包含

  • Ajax上传图片及上传前先预览功能实例代码

    Ajax上传图片及上传前先预览功能实例代码

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

  • JS实现上传图片实时预览功能

    前段时间在网络上找的代码,修改了一部分用在了项目里.原博客地址找不到了,如果原作者看到的话留言我,将于第一时间删除. //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj) { //创建dom元素 var divPreviewId = 'divPreview_' + fileObj.name; var imgPreviewId = 'imgHeadPhoto_' + fileObj.na

  • 详解nodejs实现本地上传图片并预览功能（express4.0+）

    详解nodejs实现本地上传图片并预览功能（express4.0+）

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求  ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax

  • js上传图片及预览功能实例分析

    本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".

  • AngularJS实现图片上传和预览功能的方法分析

    本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法 先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">

  • laravel框架上传图片实现实时预览功能

    在laravel框架中上传图片并实时预览,其实并没有那么难,下面给大家展示一下: HTML代码: <img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src=""> <input type="file" name="house_

随机推荐