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字符串的更多相关文章

  1. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  2. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  3. swift获取图片路径出错

    获取图片路径 用以下方式获取 let path = Bundle.main.path(forResource: "ImageName", ofType: "ImageTy ...

  4. PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能

    PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 网上很多正则表达式只能获取或者替换一个img的src内容,或者只能替换固定的字符串,要动态替换多个图片内容的试了几个小时 ...

  5. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  6. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

  7. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. Android 4.4从图库选择图片,获取图片路径并裁剪

    转至 http://blog.csdn.net/tempersitu/article/details/20557383 最近在做一个从图库选择图片或拍照,然后裁剪的功能.本来是没问题的,一直在用 In ...

  9. chrome文件上传 /获取文件路径c:/fakepath的解决办法

    jsp页面 <td style="text-align: left;padding-left: 20px;"> <img name="image&quo ...

随机推荐

  1. 转:css知多少(1)——我来问你来答

    1. 引言 各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生.比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css.这样算下来也得六年多了,有些功能可能轻车熟 ...

  2. ES6 Reflect的认识

    首先我们要了解一下,为什么会新添加这么一个全局对象?如果你看过Reflect的一些函数,你就会发现,这个对象上的方法基本上都可以从Object上面找到,找不到的那些,也是可以通过对对象命令式的操作去实 ...

  3. Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

    最近在Tomcat上配置一个项目,在点击一个按钮,下载一个文件的时候,老是会报上面的错误.试了很多方法,如对server.xml文件中,增加MaxHttpHeaderSize的大小,改端口,改Tomc ...

  4. 全基因组测序 Whole Genome Sequencing

    全基因组测序 Whole Genome Sequencing 全基因组测序(Whole Genome Sequencing,WGS)是利用高通量测序平台对一种生物的基因组中的全部基因进行测序,测定其 ...

  5. iOS设置图片名称、启动图片、防止TabBar图片和文字渲染

    设置App的名称 设置App的启动图片 需要注意点是,App要杀掉重启才能显示出启动图片 2种方法防止图片被渲染 1. vc02.tabBarItem.image = [UIImage imageNa ...

  6. mysql 查两个表之间的数据差集

    需要查两个表之间的差集 首先,想到的是主键直接not in select mailbox_id from co_user where mailbox_id not in (select mailbox ...

  7. DEDE 首页调用指定栏目链接的代码

    {dede:type typeid='6'} <a href='[field:typelink /]' target="_blank" >更多</a> {/ ...

  8. 看懂 Fiddler 的瀑布图

    最近准备给组内的新同学们分享下 Fiddler 这枚神器,可以讲的地方太多,我打算把一节课讲不完的内容写在博客上,大家可以随便看看.今天先介绍下 Fiddler 的瀑布图. 每个网络请求都会经历域名解 ...

  9. 最详细的Axure动态面板使用教程

    1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...

  10. java调用第三方包的例子

    第三方包路径 D:\jp\log4j\log4j-1.2.16.jar 代码D:\jp\log4j\Log4jDemo.java import org.apache.log4j.*; public c ...