AngularJS上传文件的示例代码

使用AngularJS上传文件

  • 前台是Angular页面
  • 后台使用SpringBoot/SpirngMVC

上传文件

html

<div>
  <input id="fileUpload" type="file" />
  <button ng-click="uploadFile()">上传</button>
</div>

js

    $scope.upload = function(){
      var form = new FormData();
      var file = document.getElementById("fileUpload").files[0];
      form.append('file', file);
      $http({
        method: 'POST',
        url: '/upload',
        data: form,
        headers: {'Content-Type': undefined},
        transformRequest: angular.identity
      }).success(function (data) {
        console.log('upload success');
      }).error(function (data) {
         console.log('upload fail');
      })
    }

注意：

  • AngularJS默认的'Content-Type'是application/json ，通过设置'Content-Type': undefined，这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data，还填充上当前的boundary，
  • 如果手动设置为：'Content-Type': multipart/form-data，后台会抛出异常：the request was rejected because no multipart boundary was found
  • boundary 是随机生成的字符串，用来分隔文本的开始和结束
  • 通过设置 transformRequest: angular.identity ，anjularjs transformRequest function 将序列化我们的formdata object，也可以不添加

后台

  @RequestMapping("/upload")
  public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {
    //deal with file
  }

注意

文件必须通过@RequestParam注解来获取，且需指定value才能获取到

这样就完成了上传文件

上传文件的同时传递其他参数

html

  <div>
    <input id="fileUpload" type="file" />
    <button ng-click="ok()">上传</button><br>
    <input ng-model="user.username" />
    <input ng-model="user.password" />
  </div>

js

  $scope.ok = function () {
    var form = new FormData();
    var file = document.getElementById("fileUpload").files[0];
    var user =JSON.stringify($scope.user);

    form.append('file', file);
    form.append('user',user);

    $http({
      method: 'POST',
      url: '/addUser',
      data: form,
      headers: {'Content-Type': undefined},
      transformRequest: angular.identity
    }).success(function (data) {
      console.log('operation success');
    }).error(function (data) {
      console.log('operation fail');
    })
  };

注意

需要将Object转为String后在附加到form上，否则会直接被转为字符串[Object,object]

后台

  @RequestMapping("/upload")
  public Map<String, Object> upload(@RequestParam(value = "file") MultipartFile file, @RequestParam(value = "user", required = true) String user) {

    try (FileInputStream in = (FileInputStream) headImg.getInputStream();
       FileOutputStream out = new FileOutputStream("filePathAndName")) {

      //将Json对象解析为UserModel对象
      ObjectMapper objectMapper = new ObjectMapper();
      UserModel userModel = objectMapper.readValue(user, UserModel.class);

      //保存文件到filePathAndName
      int hasRead = 0;
      byte[] bytes = new byte[1024];
      while ((hasRead = in.read(bytes)) > 0) {
        out.write(bytes, 0, hasRead);
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

注意

ObjectMapper为com.fasterxml.jackson.databind.ObjectMapper

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

赞 (0)

相关推荐

  • Angular2-primeNG文件上传模块FileUpload使用详解

    近期在学习使用Angular2做小项目,期间用到很多primeNG的模块. 本系列将结合实战总结angular2-primeNG各个模块的使用经验. 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 本例中为: admin.module.ts import {FileUploadModule} from 'primeng/primeng'; @NgModule({ imports: [FileUploadModule] }) 在需要使用上传功能的组件的HT

  • angularjs中$http异步上传Excel文件方法

    1.文件上传框html代码如下 <form id="fileForm" enctype="multipart/form-data"> <button id="import_asset" type="button" ng-click="import_asset()">上传文件</button> <input id="file_asset" type

  • AngularJS向后端ASP.NET API控制器上传文件

    本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task<HttpResponseMessage> Upload() { if(!Request.Content.IsMimeMultipartContent()) { this.Requ

  • 学习使用AngularJS文件上传控件

    学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

  • AngularJS+Bootstrap实现多文件上传与管理

    AngularJS+Bootstrap实现多文件上传与管理

    最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下: (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例) 该插件基本的操作可以参考:JS文件上传神器boots

  • angularjs客户端实现压缩图片文件并上传实例

    主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString

  • 基于AngularJS的拖拽文件上传的实例代码

    随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>

  • Angularjs上传文件组件flowjs功能

    现在的项目,无论代销,几乎不会缺省的一个功能就是上传下载功能,今天谈一谈使用AngularJS+bootsrtap下的上传下载功能. 1.angularjs和flowjs angularjs我在其他的博客里面也讲到了它的其他的一些用处,只是没有做过系统的说明,在这里也不打算一一介绍.这个在一些官网上都有说明,我也会花一点时间去整理一下angularjs的知识点以及在使用到angularjs需要注意的或者我在项目中碰到的一些问题,会在其他博客中跟大家分享.这里我只简单的一笔带过,主要是flowjs

  • SpringMvc+Angularjs 实现多文件批量上传

    SpringMvc代码 jar包 commons-fileupload commons-io spring-mvc.xml配置 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UT

  • AngularJS上传文件的示例代码

    使用AngularJS上传文件 前台是Angular页面 后台使用SpringBoot/SpirngMVC 上传文件 html <div> <input id="fileUpload" type="file" /> <button ng-click="uploadFile()">上传</button> </div> js $scope.upload = function(){ var f

  • JavaScript使用Ajax上传文件的示例代码

    本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

  • vuejs+element-ui+laravel5.4上传文件的示例代码

    前言 之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件 我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q

  • php 生成自动创建文件夹并上传文件的示例代码

    复制代码 代码如下: <?session_start();if($_SESSION['Company']==''){ //exit();}?><?php //上传图片 $uptypes=array('image/jpg','image/jpeg','image/png','image/pjpeg','image/gif','image/bmp','application/x-shockwave-flash','image/x-png'); $max_file_size=5000000; 

  • Python flask使用ajax上传文件的示例代码

    目录 前言 JS Form的enctype属性 Input MIME类型(更多直接百度,类型超乎你的想想) 上传单个文件 html代码部分 javascript代码部分 flask 视图函数部分 上传多个文件 html js 出问题解决方案 前言 JS 为什么要用ajax来提交在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名.HTML value

  • Spring Boot 与 Kotlin 上传文件的示例代码

    如果我们做一个小型的web站,而且刚好选择的kotlin 和Spring Boot技术栈,那么上传文件的必不可少了,当然,如果你做一个中大型的web站,那建议你使用云存储,能省不少事情. 这篇文章就介绍怎么使用kotlin 和Spring Boot上传文件 构建工程 如果对于构建工程还不是很熟悉的可以参考<我的第一个Kotlin应用> 完整 build.gradle 文件 group 'name.quanke.kotlin' version '1.0-SNAPSHOT' buildscript

  • Go Gin实现文件上传下载的示例代码

    Go Gin 实现文件的上传下载流读取 文件上传 router router.POST("/resources/common/upload", service.UploadResource) service type: POST data:{ "saveDir":"保存的路径", "fileName":"文件名称不带后缀" } // 上传文件 func UploadResource(c *gin.Conte

  • Spring Cloud Feign实现文件上传下载的示例代码

    目录 独立使用Feign 上传文件 下载文件 使用Spring Cloud Feign 上传文件 下载文件 总结 Feign框架对于文件上传消息体格式并没有做原生支持,需要集成模块feign-form来实现. 独立使用Feign 添加模块依赖: <!-- Feign框架核心 --> <dependency> <groupId>io.github.openfeign</groupId> <artifactId>feign-core</arti

  • js自己实现一个大文件切片上传+断点续传的示例代码

    js自己实现一个大文件切片上传+断点续传的示例代码

    目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

随机推荐