if (!FileReader) {
utils.showError("您的浏览器不支持HTML5,请使用现代浏览器");
return;
}
///获取文件的浏览路径
var getObjectURL = function (file) {
var url = null;
var blob = new Blob([file], { type: file.type });
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(blob);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(blob);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(blob);
}
return url;
};
var getReviseWH = function (srcWidth, srcHeight) {
var targetWidth = 400;
var targetHeight = 400;
var res = {};
if (srcWidth > targetWidth || srcHeight > targetHeight) {
if (srcWidth > srcHeight) {
var heightFloat = parseFloat(srcHeight) / parseFloat(srcWidth);
heightFloat = heightFloat * targetWidth;
res.height = parseInt(heightFloat);
res.width = targetWidth;
}
else {
var widthFloat = parseFloat(srcWidth) / parseFloat(srcHeight);
widthFloat = widthFloat * targetWidth;
res.width = parseInt(widthFloat);
res.height = targetHeight;
}
}
else {
res = { width: srcWidth, height: srcHeight };
return res;
}
res = getReviseWH(res.width, res.height);
return res;
};
document.getElementById('uploadInput').outerHTML = document.getElementById('uploadInput').outerHTML;
$('#uploadInput').on('change', function () {
if (this.files.length <= 0) return;
var file = this.files[0];
if (file.size > 2048 * 1024) {
utils.showError("请选择大小不超过2M的图片");
return;
}
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function () {
var w = img.naturalWidth;
var h = img.naturalHeight;
var wh = getReviseWH(w, h);
var cvs = document.createElement('canvas');
cvs.width = wh.width;
cvs.height = wh.height;
cvs.getContext('2d').drawImage(img, 0, 0, cvs.width, cvs.height);
$scope.imageUri = cvs.toDataURL(file.type, 1);
$scope.$apply();
}
img.src = this.result;
}
reader.readAsDataURL(file);
});
};
$scope.chooseImageFile = function () {
document.getElementById('uploadInput').click();
};
html:
<div class="panel panel-default" style="height:100%;">
<div class="panel-heading">
上传图片
</div>
<div class="panel-body">
<div class="row" ng-bind="test"></div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-3"><button class="btn btn-default" ng-click="chooseImageFile()">选择图片</button></div>
<div class="col-lg-4" style="color:red;" ng-bind="tips"></div>
<div class="col-lg-4" style="color:black;">注:GIF在上传预览无法显示动态,上传后可正常显示</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="col-lg-1">预览</div>
<div class="col-lg-8" style="padding:5px 5px 5px 5px;border:1px solid #c4c4c4;width:410px;height:410px;display:flex;justify-content:center;align-items:center;">
<img ng-src="{{imageUri}}" />
</div>
<div class="col-lg-2" style="display:flex;justify-content:center;align-items:center;">
<button class="btn btn-primary" ng-click="uploadImage()">上传</button>
</div>
</div>
</div>
</div>
<input type="file" name="file" id="uploadInput" style="display:none;" />
<div style="display:none;" ng-init="init()"></div>