今天发现的问题

在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用。

代码参考我的另一篇博客:WebAPI Angularjs 上传文件

不能运行的原因

下图红框中的代码在edge浏览器中无法执行,也就不能执行下面的上传文件代码。

解决方案

既然原因找到了,就可以寻找解决方案了,找了一下午,有一篇有用的文章:angular ng-click程序触发,方法

我的解决方案(注意加粗加大的代码【关键哟】)

JS代码如下:

  1. define(['app'], function (app) {
  2. app.controller('editController', ['$scope', "$http", 'webConfig', function ($scope, $http, webConfig) {
  3. $scope.save = function () {
  4. var fd = new FormData();
  5. var file = document.querySelector('input[type=file]').files[0];
  6. fd.append('logo', file); //angular 上传的文件必须使用特殊的格式处理,不是json格式
  7. $http({
  8. method: 'POST',
  9. url: webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", //"https://localhost:44320//api/ECategoryDetail/PostFiles"
  10. data: fd,
  11. headers: { 'Content-Type': undefined }, // 写成是undifined,浏览器才自动转化为 文件上传的类型
  12. transformRequest: angular.identity
  13. }).success(function (response) {
  14. //上传成功的操作
  15. if (response.mark) //接口返回的数据标志位,是否保存成功,保存成功则把文件相对地址更新到实体中
  16. $scope.editdata.SourceURL = response.result;
  17. else
  18. alert("上传失败");
  19. });
  20. };
  21. }]);
  22.  
  23. })
  24.  
  25. function coverChange() {
  26. $('#uploads').click();
  27. angular.element($('#uploads')).click();// ok
  28. };

大家看到这个代码会不会以为我写错了,这个coverChange方法就要写到define外面,不然页面中无法调用到这个方法,会提示undefined function。

HTML代码:

  1. <div id="preview">
  2. <img src="{{csInfo.CS.CoverUrl}}" ng-disabled="uploadimg" id="txtSourceURL" name="txtSourceURL" style="width: 180px; cursor: pointer; height: 70px;" onclick="$('#fileUpload').click()" />
  3. <input id="fileUpload" type="file" accept="image/jpg,image/jpeg,image/png, image/bmp" name="fileUpload" onchange="coverChange()" style="display: none;" />
  4. <button ng-click="save()" id="uploads" style="display: none;">确定上传</button> <!--必须使用其他控件(按钮或者标签)调用上传(save())方法-->
  5. <input id="inputSourceURL" name="inputSourceURL" type="hidden" ng-model="csInfo.CS.CoverUrl" required />
  6. </div>
  7.  
  8. <div class="word">
  9. 支持.jpg .png .jpeg 格式<span id="loading" ng-show="uploadimg"><img src="/libs/source/images/loading.gif" alt="">正在上传,请稍后···</span>
  10. </div>

API接口代码

做了一点小改动,因为edge浏览器传过来的filename是一个带盘符的路径(C:\\xxx\\filename.ext)

  1. var file = HttpContext.Current.Request.Files["cover"];
  2. var fileName = file.FileName;
  3. var fn = fileName.Split('\\');
  4. if (fn.Length > )
  5. {
  6. fileName = fn[fn.Length - ];
  7. }
  8. var fs = fileName.Split('.');
  9. if (fs.Length > )
  10. {
  11. var ext = fs[fs.Length - ];
  12. }

就是对文件名单独处理一下即可,剩下的接口代码一样。

这样改动以后就可以在谷歌和edge浏览器下运行了。

angularJS 在edge浏览器上传文件,无法主动触发ng-click的更多相关文章

  1. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  2. Android上传图片到PHP服务器并且支持浏览器上传文件(word、图片、音乐等)

    暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传 ...

  3. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题【转】

    转自:http://www.iefans.net/ie-shangchuan-bendi-lujing-fakepath/ 在使用<input id="file_upl" t ...

  4. IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题

    在使用<input id="file_upl" type="file" />控件上传文件时,有时会需要获取文件本地路径展示给客户,这时可以通过这样的 ...

  5. 【TFS 2017】使用浏览器上传文件(TFVC)或者编辑代码,错误提示TF14098,需要对文件有PendChange 权限

    从TFS 2015开始,微软在TFS系统中增加了一个非常吸引开发人员的功能,"快速代码编辑器" (Quick Code Editor).使用这个功能,你可以在任何安装了浏览器的设备 ...

  6. IE浏览器上传文件后返回结果会自动弹出下载框

    服务器使用的是node,其它语言的后台没测试过. 在IE低版本浏览器下,当你上传一个文件后后台会返回一些数据,但是IE浏览器会弹出下载提示. 这个问题是之前处理的了,没有细究,今天有人问到这个问题,顺 ...

  7. python控制浏览器上传文件

    自动化爬虫方法和库很多,难点大多数在登录.可以大致分为:普通验证码,扫码登录,QQ一键登录,拖动验证,无痕验证,人工识别(比如12306登录) 万能大法可以破解一切以上需求,自动控制浏览器行为 参考文 ...

  8. java模拟浏览器上传文件

    public static void main(String[] args) { String str = uploadFile("C:/Users/RGKY/Desktop/wKgBHVb ...

  9. 浏览器上传文件,存到oracle数据库示例。

    这里只贴了一张图, 旨在说明,思路: 将文件转换为字节,存入数据库的类型为 Blob字段. 当下载的时候,从数据库读出来通过流写回浏览器即可 文件的下载. 从数据库读出来通过流写回浏览器即可

随机推荐

  1. os模块,sys模块,json和pickle模块,logging模块

    目录 OS模块 sys模块 json和pickle模块 序列化和反序列化 json模块 pickle logging模块 OS模块 能与操作系统交互,控制文件 / 文件夹 # 创建文件夹 import ...

  2. Python从零开始——字符串String

    一:Python字符串有哪些内容 二:Python字符串操作符 三:Python字符串格式化——占位符格式化 四:Python字符串格式化——format()函数 五:Python字符串常用操作函数

  3. JS高阶---对象

    四个问题 问题拓展:对象访问方式 1.属性名包含特殊字符,例如空格.-等 2.变量名不确定 变量名不确定时需要使用['属性名'] .

  4. csp 201709-2 优先队列模拟

    数据规模: 用优先队列对各个事件的发生先后记录即可: #include<iostream> #include<queue> using namespace std; ]; st ...

  5. Kubernetes prometheus+grafana k8s 监控

    参考: https://www.cnblogs.com/terrycy/p/10058944.html https://www.cnblogs.com/weiBlog/p/10629966.html ...

  6. c语言中各个循环的流程图——方便记忆

  7. zz详解深度学习中的Normalization,BN/LN/WN

    详解深度学习中的Normalization,BN/LN/WN 讲得是相当之透彻清晰了 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Ba ...

  8. CF1193A Amusement Park

    洛谷 CF1193A Amusement Park 洛谷传送门 题目翻译 有一个游乐场有一个好玩的项目:一些有向滑梯可以将游客从一个景点快速.刺激地传送到另一个景点.现在,你要帮游乐场老板来规划一个造 ...

  9. NOIP 2012 Vigenère 密码

    洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...

  10. SQL中group by的注意事项

    最最最最重要的: group by有一个原则,就是select后面所有的列中,没有使用聚合函数的列,必须出现在group by子句中. group by子句中的注意事项: 1,不能使用别名(因为执行顺 ...