学习使用AngularJS文件上传控件

前段时间遇到上传文件的需求，需要实现的风格是这样的，如下图所示：

两个文件需要同时上传。并指定文件格式和文件大小。因为前端框架使用angular，不想因为一个上传功能引入jquery，我在网上找基于angular的上传控件。因为angular比较新，好像没有成熟的插件，网上的教程大部分都是复制粘贴的，无论如何都起不到多大作用.但是上帝帮助了帮助他的人，最后我遇到了这个强大的插件，给了我相见恨晚的感觉。好东西分享，所以现在我想和大家分享一下如何使用它们。如果你只是需要使用它们，我希望我能帮助你。

上传按钮的风格首先，我想谈谈上传文件的按钮的风格。为什么呢？大家都知道这个标签会用于上传。输入类型='file'/，这一行代码的默认风格确实有点难看，如下图所示：

在稍微强制的网站中，这样的风格真的会失去形象，如果需要在前面增加一个输入框来显示文件名，那么默认的文件名显示区域怎么隐藏呢？别担心，继续找：

将一个a标签环绕在输入标签周围，然后将输入标签的不透明度设置为0，就这样！好，看看代码：

html:

div input class=' filename ' type=' text ' readonly=' readonly '/a href=' JavaScript :'name=' file ' input type=' file ' name=' key '/browse/a/div input class=' filename ' type=' text ' readonly=' readonly '/a href=' JavaScript 3360；'Name=' file '输入类型=' file' name=' key'/browse /a /div然后是css文件：文件名{ width: 300pxheight: 30px线高： 30px；} a { width: 50px文本对齐：中心；height: 30px线高： 30px；位置：主动；cursor:指针；飞越：隐藏；display:内联块；}a输入{ position : absolute : left : 0；top : 0；opa city 3360 0；}你完了！您看到的样式如下图所示：

您可以控制前面的输入框显示您选择的文件名。不是好多了吗？

角度文件上传

例子可以找到我们需要的文件。示例中的文件es5-shim.min.js是为了兼容旧浏览器而引入的，因此这个插件非常强大。

那我们就一步一步用这个插件来实现文件上传的功能吧。

这个插件定义了几个指令：nv-file-drop、nv-file-select和uploader。

从单词的意思来猜测应该不难。第一个支持文件拖动选择，第二个是点击选择。上传器用于在控制器中绑定新创建的上传对象。

Html文件

form class=' form-horizontal ' name=' form ' div class=' form-line '标签请选择证书文件：/labelspan class='小提示'证书文件只支持。脉冲编码调制格式，文件大小1M以内/span div class=' choose-file-area ' input class=' file-name ' type=' text ' readonly=' readonly ' ng-model=' file item。name/a href=' JAVAScript :'选择书输入类型=' file ' name=' certificate ' NV-file-select uploader=' uploader ' ng-click=' clearItems()'/浏览/a/div/div class='格式行'标签请选择私钥文件：/labelspan class='小提示'私钥文件只支持。键格式，文件大小1M以内/span div class=' choose-file-area ' input class=' file-name ' type=' text ' readonly=' readonly ' ng-model=' file item 1。name/a href=' JAVAScript :'class=' select-key '输入类型=' file ' name=' key ' NV-file-select uploader=' uploader 1 ' ng-click=' clear items 1()'/浏览/a/div/按钮类型='submit' ng-click='UploadFile()'提交/按钮/表单首先，注意这里需要上传两个文件，所以我创建两个上传对象，方便管理文件和处理回调函数。最后给上传按钮一个点击事件，同时处理两个对象的上传事件。

控制器文件

var app=angular.module('app '，[' angularFileUpload '])；app。控制器(' uploadController '，['$scope '，' FileUploader '，function($scope，file uploader){ $ scope。uploadstatus=$ scope。uploadstatus 1=false//定义两个上传后返回的状态，成功获失败var uploader=$ scope。上传者=新文件上传者({ URL : '上传。PHP '，queueLimit: 1，//文件个数removeAfterUpload: true //上传后删除文件});var uploader 1=$ scope。上传者1=新文件上传者({ URL : '上传。PHP '，queueLimit: 1，removeafterupload : true })；$ scope。clearitems=function(){//重新选择文件时，清空队列，达到覆盖文件的效果上传者。clear queue()；} $ scope。clear items 1=function(){ uploader 1。clear queue()；}上传者。onafteraddingfile=function(FileItem){ $ scope。文件项目=文件项目._文件；//添加文件之后，把文件信息赋给范围};上传者1号。onafteraddingfile=function(FileItem){ $ scope。文件项目1=文件项目._文件；//添加文件之后，把文件信息赋给范围/能够在这里判断添加的文件名后缀和文件大小是否满足需求。 };上传者。onsuccessitem=函数(文件项，响应，状态，标头){ $ scope.uploadStatus=true//上传成功则把状态改为true }；上传者1号。onsuccessitem=函数(文件项，响应，状态，标头){ $ scope . uploadstatus 1=true } $ scope .UploadFile=function(){ uploader。uploadall()；上传者1号。uploadall()；如果(状态){ if(状态1){警报('上传成功!');}else{ alert('证书成功！私钥失败!');} }else{ if(status1){ alert('私钥成功！证书失败!');}else{ alert('上传失败!');} } }}])总结在上面的例子中，我定义了两个上传对象是因为要上传两个文件，每一次重新选择文件时应该覆盖之前选好的文件，所以如果定义一个对象时，有点不好操作覆盖的位置，而定义两个对象，在重新选择的时候，完全可以先清空当前对象的文件队列，再添加就好了。

其实后来我发现，也可以不定义两个上传对象，因为这个插件提供了一个移除队列（索引)方法，索引是文件队列数组中文件的指数值。因为是两次选择文件，所以把长度控制在2,然后每次选择的时候调用这个方法，根据位置传入0或者一就好了。

如果需要实现同一个窗口能够多选文件，使用加上输入类型='file' multiple='true' /即可。

如果需要限制文件类型，可以使用输入类型=“文件”接受=' image/*/'即可。

接受取值类型列表：

* accept=' application/ms xcel ' * accept=' application/msword ' * accept=' application/posscript ' * accept=' application/x-zip-compressed ' * accept=' audio/basic ' * accept=' audio/x-aiff ' * accept=' audio/x-waw ' * accept=' image/* * accept=' image/gif '这个插件还提供了很多的配置参数，对象方法和回调函数。

更多精彩内容请参考专题《ajax上传技术汇总》 , 《javascript文件上传操作汇总》 和《jQuery上传操作汇总》 进行学习。

以上就是关于AngularJS文件上传控件的使用方法介绍，希望对大家的学习有所帮助。