angularJS 在edge浏览器上传文件,无法主动触发ng-click
今天发现的问题
在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用。
代码参考我的另一篇博客:WebAPI Angularjs 上传文件
不能运行的原因
下图红框中的代码在edge浏览器中无法执行,也就不能执行下面的上传文件代码。
解决方案
既然原因找到了,就可以寻找解决方案了,找了一下午,有一篇有用的文章:angular ng-click程序触发,方法
我的解决方案(注意加粗加大的代码【关键哟】)
JS代码如下:
- define(['app'], function (app) {
- app.controller('editController', ['$scope', "$http", 'webConfig', function ($scope, $http, webConfig) {
- $scope.save = function () {
- var fd = new FormData();
- var file = document.querySelector('input[type=file]').files[0];
- fd.append('logo', file); //angular 上传的文件必须使用特殊的格式处理,不是json格式
- $http({
- method: 'POST',
- url: webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", //"https://localhost:44320//api/ECategoryDetail/PostFiles"
- data: fd,
- headers: { 'Content-Type': undefined }, // 写成是undifined,浏览器才自动转化为 文件上传的类型
- transformRequest: angular.identity
- }).success(function (response) {
- //上传成功的操作
- if (response.mark) //接口返回的数据标志位,是否保存成功,保存成功则把文件相对地址更新到实体中
- $scope.editdata.SourceURL = response.result;
- else
- alert("上传失败");
- });
- };
- }]);
- })
- function coverChange() {
- $('#uploads').click();
- angular.element($('#uploads')).click();// ok
- };
大家看到这个代码会不会以为我写错了,这个coverChange方法就要写到define外面,不然页面中无法调用到这个方法,会提示undefined function。
HTML代码:
- <div id="preview">
- <img src="{{csInfo.CS.CoverUrl}}" ng-disabled="uploadimg" id="txtSourceURL" name="txtSourceURL" style="width: 180px; cursor: pointer; height: 70px;" onclick="$('#fileUpload').click()" />
- <input id="fileUpload" type="file" accept="image/jpg,image/jpeg,image/png, image/bmp" name="fileUpload" onchange="coverChange()" style="display: none;" />
- <button ng-click="save()" id="uploads" style="display: none;">确定上传</button> <!--必须使用其他控件(按钮或者标签)调用上传(save())方法-->
- <input id="inputSourceURL" name="inputSourceURL" type="hidden" ng-model="csInfo.CS.CoverUrl" required />
- </div>
- <div class="word">
- 支持.jpg .png .jpeg 格式<span id="loading" ng-show="uploadimg"><img src="/libs/source/images/loading.gif" alt="">正在上传,请稍后···</span>
- </div>
API接口代码
做了一点小改动,因为edge浏览器传过来的filename是一个带盘符的路径(C:\\xxx\\filename.ext)
- var file = HttpContext.Current.Request.Files["cover"];
- var fileName = file.FileName;
- var fn = fileName.Split('\\');
- if (fn.Length > )
- {
- fileName = fn[fn.Length - ];
- }
- var fs = fileName.Split('.');
- if (fs.Length > )
- {
- var ext = fs[fs.Length - ];
- }
就是对文件名单独处理一下即可,剩下的接口代码一样。
这样改动以后就可以在谷歌和edge浏览器下运行了。
angularJS 在edge浏览器上传文件,无法主动触发ng-click的更多相关文章
- 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件
使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...
- Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)
暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】
转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...
- IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
在使用<input id="file_upl" type="file" />控件上传文件时,有时会需要获取文件本地路径展示给客户,这时可以通过这样的 ...
- 【TFS 2017】使用浏览器上传文件(TFVC)或者编辑代码,错误提示TF14098,需要对文件有PendChange 权限
从TFS 2015开始,微软在TFS系统中增加了一个非常吸引开发人员的功能,"快速代码编辑器" (Quick Code Editor).使用这个功能,你可以在任何安装了浏览器的设备 ...
- IE浏览器上传文件后返回结果会自动弹出下载框
服务器使用的是node,其它语言的后台没测试过. 在IE低版本浏览器下,当你上传一个文件后后台会返回一些数据,但是IE浏览器会弹出下载提示. 这个问题是之前处理的了,没有细究,今天有人问到这个问题,顺 ...
- python控制浏览器上传文件
自动化爬虫方法和库很多,难点大多数在登录.可以大致分为:普通验证码,扫码登录,QQ一键登录,拖动验证,无痕验证,人工识别(比如12306登录) 万能大法可以破解一切以上需求,自动控制浏览器行为 参考文 ...
- java模拟浏览器上传文件
public static void main(String[] args) { String str = uploadFile("C:/Users/RGKY/Desktop/wKgBHVb ...
- 浏览器上传文件,存到oracle数据库示例。
这里只贴了一张图, 旨在说明,思路: 将文件转换为字节,存入数据库的类型为 Blob字段. 当下载的时候,从数据库读出来通过流写回浏览器即可 文件的下载. 从数据库读出来通过流写回浏览器即可
随机推荐
- os模块,sys模块,json和pickle模块,logging模块
目录 OS模块 sys模块 json和pickle模块 序列化和反序列化 json模块 pickle logging模块 OS模块 能与操作系统交互,控制文件 / 文件夹 # 创建文件夹 import ...
- Python从零开始——字符串String
一:Python字符串有哪些内容 二:Python字符串操作符 三:Python字符串格式化——占位符格式化 四:Python字符串格式化——format()函数 五:Python字符串常用操作函数
- JS高阶---对象
四个问题 问题拓展:对象访问方式 1.属性名包含特殊字符,例如空格.-等 2.变量名不确定 变量名不确定时需要使用['属性名'] .
- csp 201709-2 优先队列模拟
数据规模: 用优先队列对各个事件的发生先后记录即可: #include<iostream> #include<queue> using namespace std; ]; st ...
- Kubernetes prometheus+grafana k8s 监控
参考: https://www.cnblogs.com/terrycy/p/10058944.html https://www.cnblogs.com/weiBlog/p/10629966.html ...
- c语言中各个循环的流程图——方便记忆
- zz详解深度学习中的Normalization,BN/LN/WN
详解深度学习中的Normalization,BN/LN/WN 讲得是相当之透彻清晰了 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Ba ...
- CF1193A Amusement Park
洛谷 CF1193A Amusement Park 洛谷传送门 题目翻译 有一个游乐场有一个好玩的项目:一些有向滑梯可以将游客从一个景点快速.刺激地传送到另一个景点.现在,你要帮游乐场老板来规划一个造 ...
- NOIP 2012 Vigenère 密码
洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...
- SQL中group by的注意事项
最最最最重要的: group by有一个原则,就是select后面所有的列中,没有使用聚合函数的列,必须出现在group by子句中. group by子句中的注意事项: 1,不能使用别名(因为执行顺 ...