angular 图片上传的功能

<script>
$scope.imgChange = function (element) {
if (!element.files[0]) {
// console.log("未选择图片!");
return;
}
$scope.$apply(function(scope) {
var photofile = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var prev_img = document.getElementById("face");
prev_img.src = e.target.result;
var bufferData=prev_img.src.replace(/^data:image\/\w+;base64,/, "");
$scope.imageSrc= btoa(bufferData);
//$scope.imageSrc=prev_img.src
function Uint8ToString(u8a){
var CHUNK_SZ = 0x8000;
var c = [];
for (var i=0; i < u8a.length; i+=CHUNK_SZ) {
c.push(String.fromCharCode.apply(null, u8a.subarray(i, i+CHUNK_SZ)));
}
return c.join("");
}
$scope.u8_2 = new Uint8Array(atob($scope.imageSrc).split("").map(function(c) {
return c.charCodeAt(0); }));//这个用于保存数据
$scope.b64encoded = btoa(Uint8ToString($scope.u8_2));
$scope.image= window.atob($scope.b64encoded);//这个用于页面预览
};
reader.readAsDataURL(photofile);
});
};
</script>
<ion-item class="item-input item-stacked-label">
<input onchange="angular.element(this).scope().imgChange(this)" type="file" multiple accept="image/jpg,image/jpeg,image/png" style="width: 100%; height: 251px; display:block; border: none;opacity: 0;position: absolute;" />
<img id="face" ng-src="{{userInfo.headImage}}" style="width: 100%; height: 251px;" >
</ion-item>

时间: 2024-10-11 15:56:57

angular 图片上传的功能的相关文章

我需要在Web上完成一个图片上传的功能

我需要在Web上完成一个图片上传的功能. 这个页面需要能从手机中选择图片上传. 首先,这个页面是从微信上面触发的,所以修改了微信的的入口地址,增加了身份识别号作为传参. 跳转到页面的时候,页面先检查身份识别号是否已参与过本次活动,参与过本次活动的,可以跳转到变更图片功能.如果未参与过图片上传,则需要传入图片. 看上去是很简单的逻辑. 马上行动.

rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑器,多方考虑选择了bootstrap3-wysiwyg,但是这个编辑器无法实现图片上传功能,还有换行使用br而不是p标签不是很好.于是考虑自定义完善其功能. 个人原创,版权所有,转载请注明原文出处,并保留原文链接: https://www.embbnux.com/2015/03/17/rails_u

包含修改字体,图片上传等功能的文本输入框-Bootstrap

通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设备上的照片) 依赖于浏览器标准,没有标准代码:工具条和键盘均可定制,并且能够执行任何浏览器支持的命令 首先看一下效果: 接下来,上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

thinkphp_图片上传裁剪功能

准备材料 THINKPHP jQuery表单插件 cropper 裁剪插件 思路:  利用THINKPHP上传文件类与图片裁剪类,前台想办法组合参数给后台  那怎么样可以异步提交文件呢 关键就是 jquery表单插件了 后台准备 thinkphp 上传类  http://www.kancloud.cn/manual/thinkphp/1876 thinkphp  裁剪类 http://www.kancloud.cn/manual/thinkphp/1878 前台准备 jQuery表单插件  ht

我需要在Web上完成一个图片上传的功能(+2)

增加一个页面,用于判断传参是否正确. @{     //判断是否具备会员参数     if (UrlData.Count > 0)     {         Session["Arg"] = UrlData[0];         <div>@Session["Arg"]</div>     //跳转下一个逻辑处理页面     }     else     {         <div class="alert ale

thinkphp实现UploadFile.class.php图片上传功能

图片上传在网站里是很常用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,下面是实现方法 1.我们首先需要创建一个表 复制代码代码如下: CREATE TABLE IF NOT EXISTS `tp_image` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(200) NOT NULL, `create_time

(转)淘淘商城系列——实现图片上传功能

http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项目中添加商品时上传图片的功能还没实现,如下图所示.本文将花大量笔墨来教大家如何实现图片上传这个功能. 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在<a>标签的下方是一个隐藏域,是用来接收图片上传到图片服务器的回显地址

图片上传前预览的功能

最近自己想做一个项目,涉及到很多图片上传和预览的功能,所以简单记录下: 这里我没有用vue的组件库,是单纯靠input来写出一个图片上传的功能. 思路是:先用input[type=file]来获取本地的图片,然后用HTML5的 File API 的 FileReader 图片本地转成base64格式的url,把这个url赋值到用于预览的src就好了. <div class="upload"> <div class="img-container"&g

[项目构建 五]babasport ajax图片上传及FastDFS入门案例.

今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jquery.form.js剩下的一个是FastDFS, 那么什么是FastDFS呢? FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题,特别适合以中小文