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上传）的更多相关文章

  1. Html Ajax上传文件，form表单下载文件

    Html中的代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  2. 7.Flask-上传文件和访问上传的文件

     1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...

  3. Flask-上传文件和访问上传的文件

     1.1.上传文件和访问上传的文件 upload_file_demo.py from flask import Flask,request,render_template import os from ...

  4. 用winscp从本地上传文件到服务器上出现复制文件到远端时错误。

    用winscp从本地上传文件到服务器上出现复制文件到远端时错误. 错误码:4 服务器返回的错误消息:write failed 报错如下图所示: 分析过程: 1.刚开始以为是权限不够,后面上网查了一下是 ...

  5. Git学习笔记——从一台电脑上传文件到Github上

    目标:从一台电脑上传文件到Github上 前提: 1.这里假定已在Github上创建了仓库,建立了仓库 2.已在这台电脑上安装了Git客户端 实验环境: 1.Windows 10 64位,已安装了Gi ...

  6. XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地

    使用XShell本地上传文件到Ubuntu上及从Ubuntu下载文件到本地. 1.第一种方法是最常用的 :如果下载了Xshell和Xftp,Ctrl+Alt+F就可以选择文件的互传了!(虚拟机/云服务 ...

  7. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  8. 关于上传文件 非ajax提交 得到后台数据问题

    <form name="configForm" id="configForm" method="post" action=" ...

  9. RN 上传文件到以及上传文件到七牛云（初步）

    本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现 ...

  10. requests上传文件,又要上传data的处理

    前话 最近在自己学着弄接口自动化框架,因为要封装一个发送请求的父类,其中有考虑到上传文件,以及同时上传文件,和传递其他字段数据,遇到点小问题 这里解决下. 实例的接口数据 参考文档 来自fastapi ...

随机推荐

  1. Android studio中导入第三方类库

    常常在github上看到一些好用的框架,但是对于一个新手怎样在android studio上导入去总会遇到各种麻烦,索性来研究下第三方类库怎样在android studio上导入. 以我在github ...

  2. android 使用AChartEngine 饼图的实现

    1.AChartEngine 简介 AChartEngine是为Android应用而设计的绘图工具库.可用于绘制多种图表,我使用的是achartengine-1.1.0.jar.ChartEngine ...

  3. 保护心灵窗口——防蓝光软件f.lux

    一款根据时间变化来自动改变屏幕色温的软件.让你在深夜也能感受到太阳的温暖,顺便还有助于睡眠.相较于花大价钱购置防蓝光屏或者防蓝光膜,这款软件还是excellent的 首先,概念科普(蓝光的危害就略略略 ...

  4. Git－学习笔记（常用命令集合）

    这里引用一下百度百科里Git的内容: Git --- The stupid content tracker, 傻瓜内容跟踪器.Linus Torvalds 是这样给我们介绍 Git 的. Git 是用 ...

  5. mysql优化一

    1.show global status      可以列出MySQL服务器运行各种状态值 2.show variables            查询MySQL服务器配置信息 一.慢查询 mysql ...

  6. Linux命令格式

  7. ISP图像质量调节介绍

    ISP(Image Signal Processor),即图像处理,主要作用是对前端图像传感器输出的信号做后期处理,主要功能有线性纠正.噪声去除.坏点去除.内插.白平衡.自己主动曝光控制等.依赖于IS ...

  8. unity，List元素第一个成员最好是string类型

    例如 List<CmyObj> m_list=new List<CmyObj>(); class CmyObj{ string m_name; int m_value; } c ...

  9. vim中不同模式的帮助信息的查找

    vim的模式有多种,比如normal(普通模式),insert(插入模式),command(命令行模式),visual(可视化模式).相同的命令和快捷键在不同的模式下功能是不一样的,因此帮助信息也是分 ...

  10. AESDK从流中获得变换信息

    AE中Transform下的信息位于流中,和别的软件不太一样. 如果是特效的参数信息要从EffectSuites中获取,默认的参数信息基本上StreamSuites都可以得到 需要注意,取得流之后也要 ...