AngularJs异步上传图片,并获取图片地址(JS service层)

简介: anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器会把Content-Type 设置为 multipart/form-data.

AngularJs异步上传图片,并获取图片地址(JS service层)


//文件上传服务层
app.service("uploadService",function($http){
  this.uploadFile=function(){
    var formData = new FormData();
    /*
     * "file":文件上传框的name,这里固定为file
     * file.files[0]:取第一个file
     * */
    formData.append("file",file.files[0]);
    //
    return $http({
      method: 'POST',
      url: '../upload.do',
      data: formData,
      headers:{'ContentType': undefined},
      //对表单进行序列化
      transformRequest: angular.identity
    });   
  } 
});


说明:


0、FormData是html5新增的对象,切勿在不支持html5的浏览器(尤其是令人操碎了心的IE)下使用,利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件


1、anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器会把Content-Type 设置为 multipart/form-data.


2、通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化formdata object.

目录
相关文章
|
30天前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
42 19
|
6月前
|
资源调度 JavaScript Linux
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
|
2月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
4月前
|
JavaScript
使用node.js控制CMD命令——修改本机IP地址
使用node.js控制CMD命令——修改本机IP地址
|
4月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
90 1
|
4月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
58 0
|
5月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
6月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
6月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
53 1

热门文章

最新文章