angularjs图片上传后不刷新的解决办法
刚接触angularjs在使用的过程中遇到这个问题
首先我们的图片地址是根据ID来获取的,所以用了指令来完成图片的绑定
.directive("cImg", ['appUrl', function (appUrl) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var url = appUrl+ "/GetImgUrl";
var para = { id: attrs.id};
scope.baseService.post(url, para, function (data) {
$(element).attr("src", data.d);
});
}
};
}])
<img c-img id="{{id}}" width="200" height="120" alt="">
但是这样的话上传图片后如果不刷新页面的话图片地址是不会更新的,解决方法是用一个$scope变量来记录是否显示图片,这样在更新这个变量后就会刷新图片了
<img ng-if="IsShowImg" c-img id="{{id}}" width="200" height="120" alt="">
function () {
var url = url+ "/up_load";
//上传之前设置为false 隐藏图片
$scope.IsShowImg=false;
$scope.baseService.post(url, {}, function (data) {
//上传成功后显示图片
$scope.IsShowImg = true;
});
}
angularjs图片上传后不刷新的解决办法的更多相关文章
- SpringBoot集成百度UEditor图片上传后直接访问404解决办法
SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...
- from表单文件上传后页面跳转解决办法
from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html>< ...
- angularjs图片上传和预览 base64
angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...
- 分离与继承的思想实现图片上传后的预览功能:ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- 改变wordpress图片上传后的压缩质量
WordPress 在图片上传后会默认压缩图片质量为原来的 90%,这样做的好处可以极大的加快页面的载入速度与缩小图片大小所占服务器空间. 如果希望 100% 原质量怎么办呢?如何禁止 WordPre ...
- django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统
图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...
- js实现图片上传后即时预览
//关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...
- iOS图片上传后被旋转的问题
最近用PHP做了一个图片合成程序,前端是通过HTML的file input选取自定图片,POST到php后台调整尺寸后与事先准备好的背景图进行合成. 通过测试发现,上传后的自定图片有的被旋转了,有的是 ...
- Android webview 上传文件不调用openFileChooser解决办法
html页面带有图片上传功能,关于使用openFileChooser方法去选择图片,并且在onActivityResult方法里面设置返回的图片url文件路径,网上有很多,再次不再赘述. 实践中发现, ...
随机推荐
- JavaEE(1) - Weblogic 服务器管理的数据源
JBoss下载: http://jbossas.jboss.org/downloads http://www.cnblogs.com/xw-cnblogs/articles/2439969.html ...
- Java设计模式偷跑系列(21)建模和实现享受metapatterns
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/40021651 享元模式(Flyweight):运用共享的技术有效地支持大量细粒度的对象. ...
- 跟着大神重写的KNN 文档归类小工具
·背景 在知道KNN之前,楼主有时候会粗糙地做一些分类模型的计算.在拜读了Orisun大神[http://www.cnblogs.com/zhangchaoyang/articles/2162393. ...
- The Swift Programming Language-官方教程精译Swift(5)集合类型 -- Collection Types
Swift语言提供经典的数组和字典两种集合类型来存储集合数据.数组用来按顺序存储相同类型的数据.字典虽然无序存储相同类型数据值但是需要由独有的标识符引用和寻址(就是键值对). Swift语言里的数 ...
- PhpStorm 超强语言模板的支持
原文:[转]PhpStorm 超强语言模板的支持 最近遇到一些PhpStorm编程的问题: 在使用Zen Coding插件时,PHPStorm不像Notepad++那样随便使用.PHPStorm只有在 ...
- C# 之 托付
托付(delegate) 托付是一种能够把引用存储为函数的类型.托付也能够看成是一种数据类型,能够用于定义变量,但它是一种特殊的数据类型,它所定义的变量能接受的数值仅仅能是一个函数,更确切的说 ...
- springbatch操作CSV文件
一.需求分析 使用Spring Batch对CSV文件进行读写操作: 读取一个含有四个字段的CSV文件(id, name, age, score), 对文件做简单的处理, 然后输出到还有一个csv文件 ...
- SQL Server 2008 R2中,变表的右键弹出菜单中的“选择前1000行”为“选择所有行”
原文:SQL Server 2008 R2中,变表的右键弹出菜单中的"选择前1000行"为"选择所有行" 从SQL Server 2008开始,微软为了提高查询 ...
- libvlc media player in C# (part 1)
原文 http://www.helyar.net/2009/libvlc-media-player-in-c/ There seems to be a massive misconception ab ...
- 【剑指offer】Q32:从1至n整1出现的次数(python)
def q32(n, len): if n < 0: return 0 elif n <= 1: return n total = 0 while n > 0: if n >= ...