angularJs上传文件（非form上传）
2019-05-22更新
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本表单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>
<body ng-app="myApp" ng-controller="formUploadCtrl"> <form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="file">文件输入</label>
<input type="file" id="file" class="file">
</div>
<button type="submit" class="btn btn-default" ng-click="upload()">提交</button>
</form>
<!--以防angularJs还未加载就加载了upload.js。就会报错，所以放到末尾-->
<script src="upload.js"></script> </body>
</html>
upload.js
var app = angular.module('myApp', []);
app.controller('formUploadCtrl', function ($scope,$http) {
$scope.filename = "aaa";
$scope.upload = function(){
console.log("=========Iam in!");
var url = "http://localhost:8080/api/file/fileUpload";
var user = {
};
var form = new FormData();
var file = angular.element("#file")[0].files[0];//取文件。用angular.element("#file")一定要引入jQuery。
form.append("fileName",file);
form.append("user",angular.toJson(user));//toJson将json对象转成字符串,放入实体
$http.post(url,form,{
transformRequest: angular.identity,
headers:{
'Content-Type': undefined
}
}).success(function (data) {
alert("true");
});
}
});
java：
//后台原本直接接收的User实体类。但是这种保护了文件及表单的时候，前端用了FormData,里面只能放字符串，放的时候讲json转为字符串。后端接收之后，将json字符串转换位实体（用的alibaba的json）
@PostMapping("/fileUpload")
public boolean fileUpload(@RequestParam("fileName") MultipartFile file, @RequestParam("user") String strUser) {
if (file.isEmpty()) {
return false;
} //JSONObject jsonobject = JSONObject.parseObject(strUser);
if (strUser != null) {
User user = (User) JSON.parseObject(strUser, User.class); } String fileName = file.getOriginalFilename();
int size = (int) file.getSize();
System.out.println(fileName + "-->" + size); String path = "E:/test";
File dest = new File(path + "/" + fileName);
if (!dest.getParentFile().exists()) { //判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest); //保存文件
return true;
} catch (IllegalStateException e) {
e.printStackTrace();
return false;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
=======================================================================================
angular.js:13920 Broken interceptor detected: Config object not supplied in rejection:
<input type="file" id="file{{$index}}" class="file" ngf-select ngf-change="cacScriptUploadVm.views.changeAttach($file,$index)">
function save() {
console.log(vm.views.scriptList);
var form = new FormData();
for (var i = 0; i < vm.views.scriptList.length; i++) {
var file = angular.element(".file")[i].files[0];//获取文件
form.append("files", file);//files和后台接收字段名称一样
}
//传入出了file以外的实体
/* var scriptList = JSON.stringify(vm.views.scriptList);
form.append("script", scriptList);*/
form.append("newDir","");//传一个字符串
cacScriptService.uploadFile(form);
}
function changeAttach($file, $index) {
if ($file != null && vm.views.scriptList.length > 0 && vm.views.scriptList.length >= $index) {
vm.views.files[$index] = $file;
}
}
function uploadFile(form) {
var url = _appconfig.apiBaseUrls.git + '/api/git/cac/upload';
$http({
method: 'POST',
url: url,
data: form,
headers: {'Content-Type': undefined},
transformRequest: angular.identity,
transformResponse: function(data) { // 转换response,这样就能接收后台传回来String，默认接收是json。没写这个属性之前，上传成功后却返回到error，而且会报上面的错误，写了这个就不会
return data;
}
}).success(function (data) {
console.log('upload success');
}).error(function (data) {
console.log('upload fail');
});
}
angularJs上传文件（非form上传）的更多相关文章
- Html Ajax上传文件，form表单下载文件
Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...
- 7.Flask-上传文件和访问上传的文件
1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...
- Flask-上传文件和访问上传的文件
1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...
- 用winscp从本地上传文件到服务器上出现复制文件到远端时错误。
用winscp从本地上传文件到服务器上出现复制文件到远端时错误. 错误码:4 服务器返回的错误消息:write failed 报错如下图所示: 分析过程: 1.刚开始以为是权限不够,后面上网查了一下是 ...
- Git学习笔记——从一台电脑上传文件到Github上
目标:从一台电脑上传文件到Github上 前提: 1.这里假定已在Github上创建了仓库,建立了仓库 2.已在这台电脑上安装了Git客户端 实验环境: 1.Windows 10 64位,已安装了Gi ...
- XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地
使用XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地. 1.第一种方法是最常用的 :如果下载了Xshell和Xftp,Ctrl+Alt+F就可以选择文件的互传了!(虚拟机/云服务 ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- 关于上传文件 非ajax提交 得到后台数据问题
<form name="configForm" id="configForm" method="post" action=" ...
- RN 上传文件到以及上传文件到七牛云（初步）
本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...
- requests上传文件,又要上传data的处理
前话 最近在自己学着弄接口自动化框架,因为要封装一个发送请求的父类,其中有考虑到上传文件,以及同时上传文件,和传递其他字段数据,遇到点小问题 这里解决下. 实例的接口数据 参考文档 来自fastapi ...
随机推荐
- MySQL中的锁、隔离等级和读场景
一.导言 关于MySQL中的锁还有隔离等级这类话题,其概念性的解释早已泛滥.记住其概念,算不上什么.更重要的是思考:他们的区别和联系在哪儿,为什么会有这样的概念. 1)MySQL的锁(Lock)分为行 ...
- 老生常谈，HashMap的死循环（转）
本文转自掘金占小狼:用于理解HashMap为什么线程不安全,不能用于并发. 地址就在下文: 问题 由于HashMap并非是线程安全的,所以在高并发的情况下必然会出现问题,这是一个普遍的问题,虽然网上分 ...
- JDBC 数据库连接池的简单实现
连接池代码: public class MyDataSource2{ private static String url = "jdbc:mysql://localhost:3306 ...
- js中ip地址与整数的相互转换
转载地址 //IP转成整型function _ip2int(ip) { var num = 0; ip = ip.split("."); num = Number ...
- Linux命令-网络命令:wall
wall hello word 向所有登录用户发送消息hello world root用户自己也会收到消息,wangyunpeng用户收到消息如下图:
- C#解析XML文件
想实现:C#读取XML文件内的内容至List XML文件:AppAttr.xml 其中,一定是要ArrayOfAppAttr(红色部分AppAttr为你的实体类名) <?xml version ...
- c#+mysql 中文乱码
c#+mysql 中文乱码 遇到一个奇怪的问题,C#读取mysql中文正常,写入时发生乱码 网上查阅原因,发现如下信息 ---------------------------------------- ...
- sed正则
sed -i 's/[A-Za-z0-9]*\.sdongpo\.com/group110.sdongpo.com/g' test.js
- Android Studio Share Project On Github
在Android Studio上将项目导入Github上: 1. 创建一个Project.点击VCS -> Enable Version Control Integration... 2.选择G ...
- 查看linux系统某宏的定义（另类）
有一次我想查看time_t类型的定义,一开始想直接在/usr/include/time.h中查找,结果里面没有,而是转到另外一个:__time_t(2个下划线), 结果又转到:__STD_TYPE _ ...