chrome用type=file获取图片路径并转base64字符串
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,", "");
}
chrome用type=file获取图片路径并转base64字符串的更多相关文章
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- swift获取图片路径出错
获取图片路径 用以下方式获取 let path = Bundle.main.path(forResource: "ImageName", ofType: "ImageTy ...
- PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能
PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- input type=file实现图片上传,预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- Android 4.4从图库选择图片,获取图片路径并裁剪
转至 http://blog.csdn.net/tempersitu/article/details/20557383 最近在做一个从图库选择图片或拍照,然后裁剪的功能.本来是没问题的,一直在用 In ...
- chrome文件上传 /获取文件路径c:/fakepath的解决办法
jsp页面 <td style="text-align: left;padding-left: 20px;"> <img name="image&quo ...
随机推荐
- 百度地图插件(百度地图AK申请配置指南)
百度地图AK申请配置指南 [LBS云] 百度地图AK申请配置指南 1. 该文档是详细版,图文并茂: 2. 该指南是针对browser-mobile-sever三种终端开发的申请与配置说明: 3 ...
- PC初始化
@charset "utf-8"; /* CSS Document */ html{width:%;font-family: ;padding: ;} a{color:#;text ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- Liunx read
read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 1)read后面的变量var可以只有一个,也可以有多个,这时如果输入多个数据,则第一个数据给第一个变量,第二个数据 ...
- find和find_if,value_type
find算法:返回 [first,end)中第一个值等于value元素的位置 线性复杂度:最多比较次数:元素的总个数 find函数的最后一个参数,必须是string,float,char,double ...
- CF Round #516 (Div. 2, by Moscow Team Olympiad)
前言:依旧菜,\(A\)了\(4\)题,不过这次上蓝了挺开心的. A. Make a triangle! Description 给出\(3\)根木棍,希望用它们拼成三角形,可以将其中的某些木棍增长, ...
- POJ3662或洛谷1948 Telephone Lines
二分答案+单源最短路 POJ原题链接 洛谷原题链接 显然可以二分答案,检验\(mid\)可以使用最短路来解决. 将大于\(mid\)的边看成长度为\(1\)的边,说明要使用免费升级服务,否则长度为\( ...
- css 需要阴影的效果
box-shadow: 0 0 10px 10px #b9bcbf; CSS3 box-shadow 属性 CSS 参考手册 实例 向 div 元素添加 box-shadow: div { box-s ...
- Delphi XE2有什么新功能
具体内容见PDF Delphi XE2有什么新功能Delphi XE2提供(offers)了令人兴奋(exciting)的新功能,让您能够建立高度可视化的,在Windows,Mac和iOS上的业务应用 ...
- vue 设置button disabled
<button v-bind:disabled="dis" @click="alert">button</button> dis:'' ...