angularjs图片上传和预览

思路是从file中读取base64

Module.controller('controlName', ['$scope', '$http', function($scope, $http) {
$scope.reader = new FileReader(); //创建一个FileReader接口
$scope.form = { //用于绑定提交内容,图片或其他数据
image:{},
};
$scope.thumb = {}; //用于存放图片的base64
$scope.thumb_default = { //用于循环默认的‘加号’添加图片的框
1111:{}
}; $scope.img_upload = function(files) { //单次提交图片的函数
$scope.guid = (new Date()).valueOf(); //通过时间戳创建一个随机数,作为键名使用
$scope.reader.readAsDataURL(files[0]); //FileReader的方法,把图片转成base64
$scope.reader.onload = function(ev) {
$scope.$apply(function(){
$scope.thumb[$scope.guid] = {
imgSrc : ev.target.result, //接收base64
}
});
}; var data = new FormData(); //以下为像后台提交图片数据
data.append('image', files[0]);
data.append('guid',$scope.guid);
$http({
method: 'post',
url: '/comm/test-upload.php?action=success',
data:data,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
}).success(function(data) {
if (data.result_code == 'SUCCESS') {
$scope.form.image[data.guid] = data.result_value;
$scope.thumb[data.guid].status = 'SUCCESS';
console.log($scope.form)
}
if(data.result_code == 'FAIL'){
console.log(data)
}
})
}; $scope.img_del = function(key) { //删除,删除的时候thumb和form里面的图片数据都要删除,避免提交不必要的
var guidArr = [];
for(var p in $scope.thumb){
guidArr.push(p);
}
delete $scope.thumb[guidArr[key]];
delete $scope.form.image[guidArr[key]];
};
$scope.submit_form = function(){ //图片选择完毕后的提交,这个提交并没有提交前面的图片数据,只是提交用户操作完毕后,
                        到底要上传哪些,通过提交键名或者链接,后台来判断最终用户的选择,整个思路也是如此
$http({
method: 'post',
url: '/comm/test.php',
data:$scope.form,
}).success(function(data) {
console.log(data);
})
};
}]);

angularjs图片上传和预览 base64的更多相关文章

  1. angularjs图片上传和预览 - ng-file-upload

    ng-file-upload ajax上传文件 官方demo地址 安装 bower install ng-file-upload-shim --save(for non html5 suppport) ...

  2. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  6. javascript 图片上传缩略图预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

随机推荐

  1. 用SDWebImage加载FLAnimatedImage

    用SDWebImage加载FLAnimatedImage 效果 源码 https://github.com/YouXianMing/Animations // // GifPictureControl ...

  2. cocos2d-x 3.0rc1 编译cpp-testsproject

    1.进入cocos2d-x的build文件夹 2.打开一个cmd命令行窗体,输入 android-build.py cpp-tests 然后回车

  3. TextView字体,行距,html格式,超链接,最大长度的设定

    颜色,大小 <!-- 设置字体的大小,推荐用sp做单位:字体颜色以#开头 --> <TextView android:id="@+id/textView1" an ...

  4. JAVA生成并导出json文件

    将一个list集合转换成json文件并导出: 数据集合: List<Object> agencyList = new ArrayList<Object>(); Map<S ...

  5. [Android Security] APK自我保护 - 字符串处理

    cp : https://segmentfault.com/a/1190000005128037 在开发过程中字符串不可避免,但是这些字符串也可能是破解的关键点,比如服务器的地址和错误提示这些敏感的字 ...

  6. [转]hive metadata 存mysql 注释中文乱码的有关

    FROM : http://blog.csdn.net/tswisdom/article/details/41444287 hive metadata 存mysql 注释中文乱码的问题 hive me ...

  7. [转]windows7X64环境下wamp开启PHP_Curl组件

    From : http://www.justintseng.com/windows7x64-environment-wamp-open-php_curl-in-components 装上64位的win ...

  8. 解决Web部署 svg/woff/woff2字体 404错误 iis 解决Web部署 svg/woff/woff2字体 404错误

    问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff.woff2字体的错误.导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间. 原因:因为服务器IIS不认SV ...

  9. FIR滤波原理及verilog设计

    FIR(Finite Impulse Response)Filter:有限冲激响应滤波器,又称为非递归线性滤波器. FIR滤波器的冲击响应是一个值为滤波器抽头系数的采样序列,其脉冲响应由有限个采样值构 ...

  10. VS2010 SP1安装失败之”此计算机的状态不支持此安装“()

    升级安装VS2010SP1的时候,出现“此计算机的状态不支持此安装”,Google得之: 如下图显示: 安装程序已经检测到,此计算机不满足安装此软件所需的条件.必须先解决以下这些造成阻止的问题,才可以 ...