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 > 1)
{
     fileName = fn[fn.Length - 1];
}
var fs = fileName.Split(‘.‘);
if (fs.Length > 1)
{
    var ext = fs[fs.Length - 1];
}

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

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

原文地址:https://www.cnblogs.com/dawenyang/p/11202489.html

时间: 2024-10-06 15:22:12

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

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

暑假已经过了一半了,这才完成计划当中的第二个任务.虽然进度是慢了点.但也算是暑假的收获吧.下面我就把我学习当中的收获记录在此. 还是跟以往一样,先上图片. 操作的步骤:打开程序---->选择上传的照片----->点击返回键------>显示没有选择上传图片的toast------>点击上传的图片----->打印图片的存储的物理路径---->询问是否确认上传选择的图片----->确认则显示上传成功---->取消则退出 php代码: <?php //上传文

浏览器上传文件到PHP的几种方法

使用H5的方法来上传文件 优点是:上传过程很方便,简单 缺点:并不是所有的浏览器都支持,兼容性比较差,现阶段不推荐使用 <div class="fr"> <!--上传文件方法一:--> <form name="form1"> <div class="progress"> <div class="progress-bars" style="width:1%"

浏览器上传文件+django后台处理

1,浏览器端端js程序 2,django后端处理程序 接收来自浏览器上传的文件,并把文件存储在一指定的路径下. product_id = request.POST.get('product_id') sign = request.POST.get('sign') file_size = request.POST.get('file_size') sw_ver = request.POST.get('sw_ver') file_dict = request.FILES.items() if not

浏览器上传文件夹的解决方案

众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹上传,要求:服务端保留层级结构,支持10w级别的文件夹上传. 大文件上传及断点续传,要求:支持50G级的单个文件上传和续传.续传要求:在刷新浏览器后能够续传上传,在重启浏览器后能够继续上传上(关闭浏览器后重新打开),在重启电脑后能够继续上传. 支持PC端全平台,Windows,Mac,Linux 浏

前后端分离,浏览器上传下载文件

服务器文件浏览器下载:vue请求:downloadService(){ this.$confirm('确认要下载吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => { window.open(encodeURI( restoreService.geturl()+ '/asd/dasd?dsad)) window.close() }).catch(() => { t

Python+Selenium学习笔记10 - send_keys上传文件

在火狐浏览器上传文件 上传前,同一个HTML文件在火狐和Edge浏览器显示有些不同 这是Firefox浏览器的显示 这是Edge浏览器 上传后 1 # coding = utf-8 2 3 from selenium import webdriver 4 import os 5 import time 6 7 dr = webdriver.Firefox() 8 file_path = "file:///" + os.path.abspath('upfile.html') 9 dr.g

Web上传文件的原理及实现

现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2在底层也使用了Commons FileUpload). 虽然现在有很多上传组件可以利用,但是了解Web上传文件的原理,对于处理突然出现的问题会有很大的帮助,下面就来讲一下通过浏览器上传文件的基本原理.在了解了原理之后,就可以非常容易地自制满足自身需要的上传组件了. 众所周知,在客户端代码中需要使用<

[转]文件上传原理:Web上传文件的原理及实现

现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的CommonsFileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2在底层也使用了CommonsFileUpload).在asp.net中也有相应的上传文件的控件. 虽然现在有很多上传组件可以利用,但是了解Web上传文件的原理,对于处理突然出现的问题会有很大的帮助,下面就来讲一下通过浏览器上传文件的基本原理.在了解了原理之后,就可以非常容易地自制满足自身需要的上传组件

前端之web上传文件的方式

前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传文件方式介绍 在web浏览器上传文件一般有以下几种方式: form表单上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe上传文件 其中form提交数据之后会整个刷新页面:js通过ajax上传文件虽然不会刷新整个页面,但是他们都是通过使用formdata对