通过AngularJS实现图片上传及缩略图展示示例
作者:程序大大 发布时间:2024-05-02 17:39:52
标签:angularjs,上传图片
通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下:
从项目中截出的代码
HTML部分:
<section>
<img src="image/user-tuijian/tuijian_banner.png" />
<div>
<form ng-submit="submit_form()">
<input type="text" name="aaa" placeholder="商品名称:" ng-model="form.goods_name" />
<input type="text" name="bbb" placeholder="商品网址:" ng-model="form.goods_url" />
<textarea placeholder="您宝贵的留言就是我们前进的动力!" ng-model="form.user_msg"></textarea>
<div>
<div ng-repeat="item in thumb">
<!-- 采用angular循环的方式,对存入thumb的图片进行展示 -->
<label>
<img ng-src="{{item.imgSrc}}"/>
</label>
<span ng-if="item.imgSrc" ng-click="img_del($index)"></span>
</div>
<div ng-repeat="item in thumb_default">
<!-- 这里之所以写个循环,是为了后期万一需要多个‘加号'框 -->
<label>
<input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>
</label>
</div>
</div>
<p>(*^_^*)请详细描述您的需求,有助于我们快速定位并解决问题,希望我们的产品和服务能得到您的肯定。</p>
<input type="submit" name="" value="提 交" />
</form>
</div>
</section>
JS部分:
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);
})
};
}]);
最后的效果如图:
来源:http://www.cnblogs.com/jach/p/5734920.html
0
投稿
猜你喜欢
- 网站流量上来后,日志按天甚至小时存储更方便查看和管理,而Python的logging模块也提供了TimedRotatingFileHandl
- 1 修改默认目录最近刚刚开始学习Python,比较好的一个IDE就是jupyter Notebook。可以一个cell一个cell的显示结果
- 对于信息安全有要求的,在数据下发和同步过程中需要对含有用户身份信息的敏感字段脱敏,包括用户姓名、证件号、地址等等,下面是自定义函数的代码CR
- 本文实例讲述了Python实现的质因式分解算法。分享给大家供大家参考,具体如下:本来想实现一个其它的基本数学算法问题,但是发现在实现之前必须
- 在一个规范化的研发流程中,一般遵循如下流程:开发阶段:研发功能或者修复bug,在本地自测。代码审核阶段:提交代码,并请求团队内人员做code
- asp使用WScript.Shell获取电脑的网络配置信息Option Explicit Dim WSHShe
- ASP.net与SQLite数据库通过js和ashx交互(连接和操作):废话(也是思路):用的是VS2010,打算做网站前后台。由于不喜欢前
- 前言:Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数,itertools提供的几个“无限
- 如下所示:import numpy as np# 等差数列print(np.linspace(0.1, 1, 10, endpoint=Tr
- Turtle库是Python内置的图形化模块,属于标准库之一,位于Python安装目录的lib文件夹下,常用函数有以下几种:画笔控制函数pe
- 今天有个脚本需要遍历获取某指定文件夹下面的所有文件,我记得很早前也实现过文件遍历和目录遍历的功能,于是找来看一看,嘿,不看不知道,看了吓一跳
- 前言defer是golang语言中的关键字,用于资源的释放,会在函数返回之前进行调用。一般采用如下模式:f,err := os.Open(f
- interfaceGo语言里面设计最精妙的应该算interface,它让面向对象,内容组织实现非常的方便,当你看完这一章,你就会被inter
- 引用计数Python默认的垃圾收集机制是“引用计数”,每个对象维护了一个ob_ref字段。它的优点是机制简单,当新的引用指向该对象时,引用计
- 相比大家都听过自动化生产线、自动化办公等词汇,在没有人工干预的情况下,机器可以自己完成各项任务,这大大提升了工作效率。编程世界里有各种各样的
- Flask 是一个 Python 实现的 Web 开发微框架。这篇文章是一个讲述如何用它实现传送视频数据流的详细教程。我敢肯定,现在你已经知
- 一个不错的绿色下划线的简洁CSS导航代码,纯css不用图片,效果图如下:<html> <head> <meta
- 一、需求说明能够根据模板批量生成docx文档。具体而言,读取excel中的数据,然后使用python批量生成docx文档。二、实验准备准备e
- 前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,
- YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习:Yahoo!网站性能最佳体验的34条黄金守则—内容 1、布局的思想:使用