关键词:
- 上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示:
(function() { angular.module(‘app‘, [ ‘ionic‘,‘ngStorage‘,‘ngFileUpload‘ ]); })();
- 在相应的html中引入文件路径:<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
- 如何使用呢?在html文件中使用 ngf-select
<div class="editHeader_div" ngf-select="setStore.uploadFiles($file, $invalidFiles)"> <img class="editStoreImg" ng-src="img/{{setStore.img}}"> <p>更改头像</p> </div>
在相应的controller中:
//上传单个文件 function uploadFiles(file, errFiles) { vm.imgInfo = file; console.log(file); if (file) { vm.img = file.name;//测试使用 //Service.upload(‘‘,‘‘,{file:file})//开发使用 } }
在http请求如下:
//文件上传预设配置 Upload.setDefaults({ ngfAccept: "‘.jpg,.png,.gif,.jpeg‘", ngfDropDisabled: ‘true‘, ngfPattern: ‘.jpg,.png,.gif,.jpeg‘, ngfMaxSize: ‘2MB‘ }); //上传文件 function upload(ctrl, name, param) { var deferred = $q.defer(), interfaceName = ctrl + ‘/‘ + name, backendDetail = getBackendDetail(interfaceName); //上传文件到服务器 Upload.upload({ url: backend.url + ‘:‘ + backendDetail.port + ‘/‘ + backendDetail.service + ‘/‘ + interfaceName, data: param || {} }).then(function(data) { //service返回数据 var result = data.data; //200代表接口调用成功 if (data.status === 200) { //数据库返回错误信息 if (result && serviceErrors[result.returnCode]) { deferred.reject(‘Error Services‘); swal(result.message, ‘错误状态码:‘ + result.returnCode, ‘error‘); } else if (!result.dataInfo) { deferred.reject(‘Error Image‘); swal(‘图片上传失败‘, ‘请检查图片属性‘, ‘error‘); } else { deferred.resolve(result); } } else { deferred.reject(‘Error Services‘); swal(‘提交操作失败‘, ‘错误状态码:‘ + data.status, ‘error‘); } }, function(error) { deferred.reject(‘Error Services‘); swal(‘提交操作失败‘, ‘错误状态码:‘ + error.status, ‘error‘); }); return deferred.promise; }
angularjs上传图片和文件
很简单:$scope.upload=function(){ varf=$scope.myFile; varfd=newFormData(); varimg=document.querySelector(‘input[type=file]‘).files[0]; //varfile=[]; //file.push(f); //file.push(img); fd.appe 查看详情
angularjs图片上传功能的实现
一、前言前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考一下,如果您有更好的方法,欢迎留言交... 查看详情
angularjs+ionic移动端图片上传的解决办法
前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也... 查看详情
AngularJS 使用 ng-upload 上传图片
】AngularJS使用ng-upload上传图片【英文标题】:AngularJSUploadingAnImageWithng-upload【发布时间】:2013-06-1711:55:18【问题描述】:我正在尝试使用ng-upload在AngularJS中上传文件,但我遇到了问题。我的html看起来像这样:<divclass="create-articl... 查看详情
如何在 Summernote 编辑器(AngularJs 版本)中上传图片?
】如何在Summernote编辑器(AngularJs版本)中上传图片?【英文标题】:HowtouploadimageinSummernoteEditor(AngularJsversion)?【发布时间】:2016-06-0704:54:05【问题描述】:谁能告诉我如何在summernote编辑器(angularJsv.)中上传图片?我的代码:$sc... 查看详情
angularjs上传图片并转换成base64保存到数据库(代码片段)
1、前台:jsp<divstyle="width:160px;height:130px;border-radius:16px;position:relative;"><ahref="javascript:;"style="position:absolute;width:100%;height:100%;"><divstyle="width:100%;height:100%;"><imgng-if="loginedAc... 查看详情
angularjs中ckeditor的destroy问题
项目中,在切换了页面的tab页后会发现上传图片的操作报错,检查后发现问题根源是切换了tab页重新加载页面时ckeditor又会创建一次,这个时候的ckeditor已经不是第一次创建的那个了,所以上传图片的方法中会报错。解决方法:... 查看详情
Angularjs - 使用 php 上传文件
】Angularjs-使用php上传文件【英文标题】:Angularjs-Fileuploadwithphp【发布时间】:2013-12-2712:59:49【问题描述】:我花了几天时间寻找一个相当简单的angularjs文件上传方法集成,其中包括一个基本的php服务器端脚本..我需要一个简单的... 查看详情
angularjs上传文件怎么设置$http为multipart/form-data
参考技术A前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题:图片上传。主题:图片上传服务器,然后通过... 查看详情
Angularjs上传多个文件
】Angularjs上传多个文件【英文标题】:Angularjsuploadingmultiplefiles【发布时间】:2020-04-2410:49:33【问题描述】:我们的团队正在ServiceNow中进行开发,需要能够上传文档并将其附加到案例记录中。在浏览了几个示例之后,我们有一个... 查看详情
如何使用 AngularJS 将文件上传到 Google Drive
】如何使用AngularJS将文件上传到GoogleDrive【英文标题】:HowtouploadfiletoGoogleDrivewithAngularJS【发布时间】:2015-12-1110:07:12【问题描述】:我卡住了,我无法使用AngularJS将文件上传到GoogleDrive。现在我的客户想知道他们想使用AngularJS将... 查看详情
使用 AngularJS 上传文件
】使用AngularJS上传文件【英文标题】:FileUploadusingAngularJS【发布时间】:2013-09-0510:21:53【问题描述】:这是我的HTML表单:<formname="myForm"ng-submit=""><inputng-model=\'file\'type="file"/><inputtype="submit"value=\'Submit\'/></for 查看详情
使用 AngularJS 和 SpringMVC 进行多部分文件上传
】使用AngularJS和SpringMVC进行多部分文件上传【英文标题】:MultipartFileUploadusingAngularJSandSpringMVC【发布时间】:2017-07-2900:45:09【问题描述】:我是angularJS的新手,并尝试使用angularJS和SpringMVC上传文件,但无法获得所需的解决方案并... 查看详情
无法上传文件,php和angularjs
】无法上传文件,php和angularjs【英文标题】:Can\'tuploadfiles,phpandangularjs【发布时间】:2014-11-2113:33:40【问题描述】:我正在尝试使用angularJs和PHP上传文件。我正在使用angular-file-upload,https://github.com/danialfarid/angular-file-upload。问题... 查看详情
如何在angularjs中使用ng-file上传裁剪和上传图像
】如何在angularjs中使用ng-file上传裁剪和上传图像【英文标题】:Howtocropanduploadaimageusingng-fileuploadinangularjs【发布时间】:2015-12-0114:04:24【问题描述】:您好,我正在尝试裁剪图像并使用angularjs中的ng-file上传来上传图像。裁剪后... 查看详情
从AngularJS上传文件到NodeJS的交叉错误
】从AngularJS上传文件到NodeJS的交叉错误【英文标题】:CrosserroruploadingfilefromAngularJStoNodeJS【发布时间】:2014-08-2720:56:30【问题描述】:我在将文件从angularjs客户端上传到NodeJS服务器时遇到问题。错误:XMLHttpRequestcannotloadhttp://localh... 查看详情
nodejs + multer + angularjs 无需重定向即可上传
】nodejs+multer+angularjs无需重定向即可上传【英文标题】:nodejs+multer+angularjsforuploadingwithoutredirecting【发布时间】:2016-01-0214:32:18【问题描述】:我正在使用Nodejs+Multer+angularjs在服务器上上传文件。我有一个简单的HTML文件:<formact... 查看详情
AngularJS:使用 $resource 上传文件(解决方案)
】AngularJS:使用$resource上传文件(解决方案)【英文标题】:AngularJS:Uploadfilesusing$resource(solution)【发布时间】:2014-02-0215:27:20【问题描述】:我正在使用AngularJS与RESTful网络服务进行交互,使用$resource来抽象暴露的各种实体。其... 查看详情