AngularJs preview picture example code before uploading
- 2021-07-13 03:53:23
- OfStack
In the work, the use of AngularJs for development, in the project, often encounter uploaded pictures, need to preview the picture content next to 1, check some data before, combined with practice, get a more practical method, relatively simplified version, record 1 here, if there are different views, welcome 1 communication, 1 growth.
demo.html:
<!doctype html>
<html ng-app="myTestCtrl">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="myCtrl.js"></script>
<style type="text/css">
.inputBox{width: 160px; height: 28px; padding: 0 0 0 8px; box-sizing: border-box; background-color:#fff; margin-left: 5px; border: 1px solid #c4c4c4; color: #333; border-radius: 3px; -o-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.inputBox:focus{border: 1px solid #207fe9;}
.btn-primary {color: #fff; background-color: #428bca; border-color: #357ebd;}
.btn {display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400;line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;}
.bg-bbbbbb{background-color: #bbb;}
.fl{float:left;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml30{margin-left: 30px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.f-cb:after:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb{zoom:1;}
.f-cb .topSearch{ float: left; margin-top: 10px; line-height: 30px; font-size: 12px; }
</style>
</head>
<body id="myTestCtrl" ng-controller="myTestCtrl">
<div class="wrapper">
<div class="content">
<div class="f-cb" style="height: 40px;">
<div class="topSearch"><span class="w70 tr dib fl"> Main visual image: </span><input type="text" class="inputBox fl ml5" ng-model="fileName"><button class="btn btn-primary ml10" ng-class="{'bg-bbbbbb':imgDisabled}" style="width:60px; margin-top:-3px; height:18px; position: relative;" img-upload></button></div>
</div>
<div class="f-cb mt10"><img ng-src="{{thumb.imgSrc}}" style="width:200px; height: 200px;" ng-show="thumb.imgSrc"/></div>
</div>
<div class="mt20 ml30">
<button class="btn btn-primary" ng-click="saveClick()" ng-class="{'bg-bbbbbb':submitDisabled}"> Submit </button>
</div>
</div>
</body>
</html>
<span style="font-size:14px;">myCtrl.js:</span>
<pre name="code" class="javascript">// Key js Part
var myTestCtrl = angular.module('myTestCtrl', []);
// Define the "upload" instruction, which can also be used to upload other types of files after modification
myTestCtrl.directive("imgUpload",function(){
return{
// Defines by setting items
restrict: 'AE',
scope: false,
template: '<div class="fl"><input type="button" id="storeBtn" style="padding:0; position: absolute; top: 0; left: 0; background: none; border: none;color: #fff; width:84px; height: 30px; line-height: 30px;" value=" Select a file "><input type="file" name="testReport" id="file" ng-disabled="imgDisabled" style="position: absolute; top: 0; left: 0; opacity: 0;height: 30px;" accept=".jpg,.png"></div>', //name:testReport Corresponds to the interface field.
replace: true,
link: function(scope, ele, attrs) {
ele.bind('click', function() {
$('#file').val('');
});
ele.bind('change', function() {
scope.file = ele[0].children[1].files;
if(scope.file[0].size > 52428800){
alert(" Picture size is not greater than 50M");
scope.file = null;
return false;
}
scope.fileName = scope.file[0].name;
var postfix = scope.fileName.substring(scope.fileName.lastIndexOf(".")+1).toLowerCase();
if(postfix !="jpg" && postfix !="png"){
alert(" Pictures only support png , jpg File of type ");
scope.fileName = "";
scope.file = null;
scope.$apply();
return false;
}
scope.$apply();
scope.reader = new FileReader(); // Create 1 A FileReader Interface
console.log(scope.reader);
if (scope.file) {
// Get pictures (preview pictures)
scope.reader.readAsDataURL(scope.file[0]); //FileReader To turn the picture into base64
scope.reader.onload = function(ev) {
scope.$apply(function(){
scope.thumb = {
imgSrc : ev.target.result // Receive base64 , scope.thumb.imgSrc For pictures.
};
});
};
}else{
alert(' Upload pictures cannot be empty !');
}
});
}
};
});
myTestCtrl.controller("myTestCtrl", function($scope, $http) {
// Import pictures
$scope.saveClick = function () {
// Disable button
$scope.imgDisabled = true;
$scope.submitDisabled = true;
var url = '';// Interface path
var fd = new FormData();
fd.append('testReport', $scope.file[0]);// Parameter testReport= Background definition upload field name ; $scope.file[0] Content
$http.post(url, fd, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).success(function (data) {
if(data.code != 100) {
alert(JSON.stringify(' File import failed: '+files.files[0].name+' Please re-upload the correct file or format '));
}else{
alert(JSON.stringify(' File imported successfully: '+files.files[0].name));
}
// Restore button
$scope.imgDisabled = false;
$scope.submitDisabled = false;
}).error(function (data) {
alert(' Server error, file import failed! ');
// Restore button
$scope.imgDisabled = false;
$scope.submitDisabled = false;
});
};
});
</pre>
<br>
<pre></pre>
<p></p>
<pre>
</pre>
<p></p>
<pre>
</pre> About the knowledge of angularjs, you can refer to the special topics sorted out by this site, angularjs study notes, and take a look at it!