角度角度示例代码-文件上传-文件上传

问题描述

附件上传

验证结果作为附件上传。

这里不考虑api。

任务是点击选中一个文件，选中后就可以清除文件了。

插件介绍

使用项目反映的插件，角度文件上传。

角度文件上传：https://github.com/nervgh/angular-file-upload

言归正传，我们如何安装它？还是和安利npm一样

npm install angular-file-upload插件非常简单，这是一个指令。我们在它提供给我们的指令中声明了一个uploader对象，它指示在不同的时间执行什么操作，另一种观察者模式。

功能实现

使用说明

官网给出了这个指令的多种用法，这里选择最简单的，Single，单文件上传。

输入类型=' file ' NV-file-select uploader=' uploader '/文件类型的输入。使用nv-file-select指令，并将其作为参数传递给上传程序对象。

简单的逻辑是创建一个FileUploader的新对象，然后重写它的onAfterAddingFile方法，这是一个文件添加后要执行的方法，即点击选择文件，选择文件，点击完成。

在这种方法中，我们直接上传文件。

//新建一个文件上传实例self . uploader=new file uploader()；//重写方法self . uploader . onafteraddingfile=function(file item){//print log if(config . debug){ console . info(' onafteraddingfile '，file item)；}//上传文件self . upload(FileItem)；};//传递到view $ scope . uploader=self . uploader；如果文件是作为指令上传打包的，上面的代码要在方法指令的控制器方法中执行！

关于指令中编译、控制器和链接执行的详细说明，请参考Angular指令中编译、控制器和链接的正确用法。

原因分析

也许nv-file-select指令在实现的时候绑定了link函数中的各种事件，绑定的时候需要我们的uploader对象。

而如果我们把它放在link函数中，这条指令的link函数比nv-file-select的link函数执行得晚，所以是无效的。

上传

//上传文件self.upload=function(data) {//上传文件attachmentservice。上传文件(数据。_文件)。然后(函数success(response){//将成功上传的附件绑定到$ scope。ngModel=响应。ngmodel中的数据；//显示上传按钮self . show clear()；}，函数错误(){//提示用户上传失败sweetAlert.swal({ title: '对不起，text: '上传的附件不能大于1M，请确认附件是否大于1M ' })；});};空的

如果用户上传了错误的文件怎么办？添加一个清除按钮，上传文件后显示。

//清空所选文件self . clear=function(){ self . delete file(scope . ng model . id)；};//删除附件本身。delete file=function(id){ attachmentservice。deletefile (id，function success(){//将附件分配为空的对象范围，ng model=undefined；//隐藏空按钮self . Hide clear()；});};scope . clear=self . clear；但是，这里会有一个问题。只有服务器上的附件被删除，选择文件的效果依然存在。选定的文件名仍显示在此处。

解决方法是用一个表单包装它，将按钮的类型设置为重置，当您单击按钮时，您将清空输入的内容。

表单名称=' formInner ' novalidate字段集标签类=' col-sm-4 control-label '附件/label div class='col-sm-4 '输入类型=' file ' NV-file-select uploader=' uploader '/div class=' col-MD-4 '按钮类型=' reset ' ng-if=' params。showclearorno ' ng-click=' clear()' class=' BTN BTN-xs BTN-default '清除/button /div /fieldset/formform输入ng-model='xxx' /云志-上传-文件ng-model=' work。申请。附件“/云志-上传-文件/表单设置为重置之后就会出现新的问题，因为是在一个形式表单里套的这个指令，所以重置，将其他的也都清空了。

尼日利亚形

拿尼日利亚形解决了问题。

这是尼日利亚形指令的官方解释：

超文本标记语言不允许表单元素嵌套。嵌套表单很有用，例如，如果需要确定控件子组的有效性。

超文本标记语言不允许嵌套形式元素尼日利亚型被用来嵌套形式，如果一个子的形式组需要被验证。

但是尼日利亚形并没有实现形式的功能，ng-提交就不能使用，想想这样设计也是合理的，如果尼日利亚形也能提交，嵌套形式，一个使服从的按钮，提交谁？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。