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.

目录
相关文章
|
3月前
|
资源调度 JavaScript Linux
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
【Azure 应用服务】本地Node.js部署上云(Azure App Service for Linux)遇到的三个问题解决之道
|
3月前
|
前端开发 JavaScript API
使用 JavaScript 实现图片上传
使用 JavaScript 实现图片上传
117 1
|
1月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
53 1
|
1月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
34 0
|
2月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
3月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
31 1
|
3月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
3月前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?