用AngularJS写文件上传时遇到了个问题,就是文件类型判断,一般上传文件类型判断都是在前端完成,如果提交给后台发请求判断处理,这无疑会增加服务器端压力。

AngularJS还有点不同的是,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空。

<div  ng-controller="editorProceCtrl" >
           <input type="file"  ng-model="feupload" />{{feupload}}
           <button ng-click="upsave()"  >上传</button>
</div>
js代码
 $scope.upsave = function() {
            alert("@@@@@"+$scope.feupload);//feupload没有值  

           var fd = new FormData();
            var file = document.querySelector('input[type=file]').files[0];

            if($scope.feupload.length> 1 && $scope.feupload) {

                var ldot = filename.lastIndexOf(".");
                var type = filename.substring(ldot + 1);

                if(type != "doc" && type !="docx") {
                    alert("文件类型不对,请重新选择");
                    //清除当前所选文件...
                }else{

                    发送后台操作...
                    
                }
            }
}
直接这样写,后台直接定义取是不行的,ng-model并不能将值传给js

网上找了资料,最后的处理方法:
<div  ng-controller="editorProceCtrl" >//onchange改变事件
            <input type="file"  ng-src={{files[0].name}} onchange='angular.element(this).scope().fileChanged(this)'/>
            <button ng-click="upsave()"  >上传</button>
</div>
js代码:
        $scope.fileChanged = function(ele){
            $scope.files = ele.files;
            $scope.$apply(); //传播Model的变化。
        }

        /**
         * 文件上传
         */
        $scope.upsave = function() {
            var fd = new FormData();
            var file = document.querySelector('input[type=file]').files[0];

            var filename = $scope.files[0].name;

            if(filename.length> 1 && filename ) {

                var ldot = filename.lastIndexOf(".");
                var type = filename.substring(ldot + 1);

                if(type != "doc" && type !="docx") {
                    alert("文件类型不对,请重新选择");
                    //清除当前所选文件...
                }else{

                    发送后台操作...
                    
                }
            }
是的,这样就可以了。

angularJs 取<input type='file'>中文件名 (ng-model获取不了)的更多相关文章

  1. HTML5 input新增type属性color颜色拾取器的实例代码

    type 属性规定 input 元素的类型。本文较详细的给大家介绍了HTML5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随脚本之家小编一起看看吧

  2. 移动HTML5前端框架—MUI的使用

    这篇文章主要介绍了移动HTML5前端框架—MUI的使用的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. 使用placeholder属性设置input文本框的提示信息

    这篇文章主要介绍了使用placeholder属性设置input文本框的提示信息,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. Bootstrap File Input文件上传组件

    这篇文章主要介绍了Bootstrap File Input文件上传组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. HTML5中input输入框默认提示文字向左向右移动的示例代码

    这篇文章主要介绍了HTML5中input输入框默认提示文字向左向右移动,本文通过实例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. swift 正则表达式运用实例选自《swifter 100个swift开发必备tip 》

  7. Swift 2.0关键字guard

    viewmode=list前言:当一项新的技术出来的时候,第一参考自然是文档。文档链接guard语句guard语句的作用是:当某些条件不满足的情况下,跳出作用域举个例子:写个函数,保证输入小于10在playground输入如下可以看到输出上述方法和使用if一样但是使用guard有一个好处如果不使用return,break,continue,throw跳出当前作用域,编译器会报错所以,对那些对条件要求十分严格的地方,guard是不二之选。另外,guard也可以使用可选绑定也就是guardlet的格式例如如何

  8. Swift 柯里化(currying)和反柯里化(uncurrying)

    //DemoofcurryingfuncaddTwoNums(a:Int)(num:Int)->Int{returna+num}letaddToFour=addTwoNums(4)letresult=addToFour(num:6)print("result:\(result)")funcgreaterThan(comparor:Int)(input:Int)->Bool{returninput>

  9. swift – 上下文类型“AnyObject”不能与字典文字一起使用?

    我正在尝试将Objective-C示例转换为Swift2,但我遇到一个小问题。原来的Objective-C片段:我认为Swift代码应该是:结果错误是:在这种情况下,如何将Objective-C转换成Swift?因此,声明数组更具体在Swift3中用于JSON集合类型或字典/数组仅包含值类型使用

  10. swift – 我可以指定generic是值类型吗?

    我知道我们可以通过使用AnyObject来基本上指定我们的泛型是任何引用类型:但是有没有办法指定我们的泛型应该只是值类型,不允许引用类型?

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部