?

?

1 html頁面

<div class="col-sm-2" style="height: 200px;margin-top: 14px;">
<input id="photo" name=" " type="file" value="選擇圖片" ?ng-model="photoUrl">
<input type="button" ng-click = "uploadPic()" value="確定" style="margin-top: 150px;margin-left: 10px;"/>
</div>

2 js里面

$scope.uploadPic = function(){
var obj = document.getElementById("photo");
console.log("13:"+obj.value)
if(obj.value){
var file = obj.files[0]

//注意此處，chrome不支持直接獲取文件的絕對路徑，需要把文件放到一個中間地址，然后用js獲取這個中間地址的絕對路徑
var?windowURL?=?window.URL?||?window.webkitURL;??
???var dataURL?=?windowURL.createObjectURL(file);?
console.log($('#img1'))
console.log(dataURL)
?$('#img1').attr('src',dataURL)
var img = document.createElement('img');
img.src = dataURL;

以上是在中間地址放文件的邏輯
var data
img.onload =function() {

//轉base64
data = getBase64Image(img);
console.log("changdu:"+data.length);

一般瀏覽器對提交字符串有大小限制，要限定一下，要不會報錯
if(data.length<1050000){
console.log(data);
$('#img1').attr('src',data)
$scope.pic = {};
$scope.pic.idPark = idPark;
$scope.pic.picture = data;
dataParkSettingAdmin.saveOrUpdateParkPicture(idPark,$scope.pic).success(function(data) {
console.log("shangchuantupian:"+data.result);
})
}else{

app.modalWin.info({title:' ', content:'該圖片不支持上傳' });
}
}
}
}

以下是圖片轉base64字符串的函數
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL // return dataURL.replace("data:image/png;base64,", "");
}

轉載于:https://www.cnblogs.com/zhaoblog/p/6534299.html

總結

以上是生活随笔為你收集整理的chrome用type=file获取图片路径并转base64字符串的全部內容，希望文章能夠幫你解決所遇到的問題。

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