Angular Js文件上傳之form-data
更新時間：2015年08月28日 11:34:00 投稿：mrr
angular-file-upload 是一個基于HTML5技術(shù)的文件上傳輕量級 AngularJS指令（directive），當瀏覽器不支持時轉(zhuǎn)為采用 FileAPI polyfill技術(shù)實現(xiàn)(基于Flash)。本文主要給大家介紹Angular Js文件上傳之form-data，需要的朋友可以參考下
前言：很久沒更新博客，最近公司pc端技術(shù)選型用angular,這幾天就趕鴨子上架，硬著頭皮直接上手angular。其中有許多小坑陸陸續(xù)續(xù)踩起走。今天就遇到一個比較常見的問題：圖片上傳。
主題：圖片上傳服務器，然后通過服務器傳阿里云。
不廢話了直接貼前端代碼：
$http({
method: ‘POST‘,
url: ‘/wechatapp/User/setAvatar‘,
data: data,
headers: {
‘Content-Type‘: undefined
},
transformRequest: function(data) {
var formData = new FormData();
formData.append(‘a(chǎn)vatar_data‘, data.adata);
formData.append(‘a(chǎn)vatar_file‘, data.file);
return formData;
},
data: {
adata: scope.avatar_data,
file: scope.avatar_file
}
}).success(function(d) {
//請求成功
cb(d);
}).error(function(err, status) {
console.log(err);
cb(err);
});
其實沒神馬難點，主要是取消post默認的Content-Type,然后已FormData的方式上傳。一般ajax上傳文件都是以FormData方式傳。
以上就是本文給大家介紹Angular Js文件上傳之form-data，希望大家喜歡。
您可能感興趣的文章:
- JS中使用FormData上傳文件、圖片的方法
- JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實現(xiàn)方法
- JS FormData上傳文件的設(shè)置方法
- js使用formData實現(xiàn)批量上傳
- vuejs使用FormData實現(xiàn)ajax上傳圖片文件
- Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
- js動態(tài)在form上插入enctype=multipart/form-data的問題
- NodeJs form-data格式傳輸文件的方法
- Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
- JS FormData對象使用方法實例詳解
相關(guān)文章
這篇文章主要為大家詳細介紹了基于JavaScript定位當前的地理位置，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
javascript設(shè)計模式 – 中介者模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 中介者模式,結(jié)合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示)
這篇文章主要介紹了在百度搜索結(jié)果中去除掉一些網(wǎng)站的資料(通過js控制不讓顯示),需要的朋友可以參考下2017-05-05
js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）
這篇文章主要為大家介紹了js實現(xiàn)獲取最新本周周一開始的日期（單周日歷卡）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
連連看最難的部分應該是路徑搜索，即鼠標點的兩點之間看有無可通的路徑。 看過有人寫的遞歸寫法，心里癢癢，就捉摸了一下，發(fā)現(xiàn)不用遞歸的情況下難度也不大2013-12-12
左鍵復制對于所有人來說有好有壞，例如原創(chuàng)內(nèi)容就不想被別人復制，接下來介紹一種方法，有需要的朋友可以參考下2013-01-01
最近在做公司的小程序項目,發(fā)現(xiàn)設(shè)計上有很多不統(tǒng)一,代碼上有很多冗余,下面這篇文章主要給大家介紹了關(guān)于小程序開發(fā)實戰(zhàn)指南之封裝自定義彈窗組件的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JS手寫一個自定義Promise操作,結(jié)合實例形式分析了JS自定義Promise的實現(xiàn)與使用相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細介紹了js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11