首先我們需要一個指令來追蹤input的change。ngChage不適用input[file]。

app.directive("fileread", [function () {
return {
scope: {
selectedFile: "=",
changed: '&'
},
link: function(scope, element, attributes) {
element.bind("change", function(changeEvent) {
scope.$apply(function() {
scope.selectedFile = changeEvent.target.files[0];
// or all selected files:
// scope.fileread = changeEvent.target.files;
console.log('file selected.');
if (scope.changed()) {
scope.changed()(scope.selectedFile);
}
});
});
}
};
}]);

然后在controller里定義file的變量跟change綁定的function。

$scope.showFileSelectBox = function () {
$("#imgSelectInput").click();
};

$scope.imageSelected = function(file) {
var image;

if (file) {

image = new Image();

image.onload = function () {

$scope.editObj.Width = this.width;
$scope.editObj.Height = this.height;
};

image.src = $window.URL.createObjectURL(file);

}
};

然后是html

<button type="button" ?ng-click="showFileSelectBox()">上傳</button>
<input type="file" style="display: none" accept="image/*" fileread selectedfile="selectedImgFile" id="imgSelectInput" changed="imageSelected" />

轉載于:https://www.cnblogs.com/wangjie-01/p/4862620.html

總結

以上是生活随笔為你收集整理的关于angularjs input上传图片前获取图片的Size 浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。