您的位置：首页 > Web前端 > AngularJS

angularjs 实现图片上传实时预览

2017-04-18 09:22 597 查看

第一部分： html部分

angularjs 主要定义了 upload-img 指令，然后还有用到ng-src，以及angularjs必须的文件

完整版下载网址：http://download.csdn.net/detail/u012767607/9817358

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<link href="css/special.css" rel="stylesheet" />

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/special.js"></script>

<script src="js/angular-1.3.0.js"></script>

<script src="js/app.js"></script>

<script src="js/app/uploadPhoto.js"></script>

</head>

<body>

<div class="sp-page-content" ng-controller="addPhotoCtrl as ctl">

<div class="sp-page-box">

<div class="sp-page-boxcolumn span1">

照片：

</div>

<div class="sp-page-boxcolumn span2">

<span class="sp-upload">

<img class="sp-upload-photo" alt="" ng-src="{{ctl.info.photo1}}" />

<input type="file" upload-img class="sp-upload-img" />

</span>

</div>

</div>

<br />

<input type="button" value="打印" ng-click="ctl.print()" class="sp-btn-blue" />

</div>

</body>
</html>

效果图：

第二部分：js部分

2.1. app.js部分

'use strict';

var app = angular.module('app', [

]);

2.2. /uploadPhoto.js 部分

app.controller("addPhotoCtrl", ["$http", function ($http) {

var self = this;

self.info = {

photo1: "",

photo2: ""

};

self.print = function () {

console.log(self.info);

};

}]);

app.directive("uploadImg", function () {

return {

restrict: 'AE',

scope: false,

link: function (scope, elem, attrs) {

elem.bind('click', function () {

$(this).val('');

});

elem.change(function () {

var file = this.files[0];

if (file.size > 52428800) {

alert("图片大小不大于50M");

file = null;

return false;

}

var fileName = file.name;

var postfix = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

if (postfix != "jpg" && postfix != "png") {

alert("图片仅支持png、jpg类型的文件");

fileName = "";

file = null;

return false;

}

var fileUrl = $(this).val();

$(this).parent().children(".sp-upload-photo").attr("data-url", fileUrl);

var getimg = $(this).parent().children(".sp-upload-photo");

var filereader = new FileReader();

filereader.readAsDataURL(file);

$(filereader).load(function () {

getimg.attr("src", this.result);

console.log(this.result);

});

});

}

}

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航