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. Unity3D游戏开发之SQLite让数据库开发更简单

    各位朋友大家好.欢迎大家关注我的博客,我是秦元培,我是博客地址是http://blog.csdn.net/qinyuanpei.在经历了一段时间的忙碌后,博主最终有时间来研究新的东西啦,今天博客向和大 ...

  2. MySQL-EXPLAIN用法详解

    今天做一个订单任务, 其中需要查有无此订单号信息, 由于订单号是个列表, 所以想检测下如下语句的性能(主要在LIMIT 1上) "订单号 IN (订单号列表)" LIMIT 1 然 ...

  3. spring.xml从外部文件引入数据库配置信息

    <!-- 分散配置 --> <context:property-placeholder location="classpath:jdbc.properties" ...

  4. 心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍

    心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具.   心智图 ...

  5. Android设计模式系列(1)--SDK源码之组合模式

    Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式,Compos ...

  6. Oracle忘记密码找回

    生活中,容易忘记Oracle数据库system用户的密码,怎么办呢,小生带你一步步重新登上Oracle ,及时你密码忘记了. 1.打开cmd窗口,输入 sqlplus / as sysdba 2.运行 ...

  7. ItelliJ基于Gradle创建及发布Web项目（三）

    关键字:web 多模块 用惯了eclipse傻瓜式的配置,开始web部署真的不习惯. 一.现象: 项目发布了,死活找不到依赖模块中的类. 二.排查 确定F4->Artifacts->Out ...

  8. 动态时间规整-DTW算法

    作者:桂. 时间:2017-05-31  16:17:29 链接:http://www.cnblogs.com/xingshansi/p/6924911.html 前言 动态时间规整(Dynamic ...

  9. unity, mono断点

    在unity编辑器中点运行后,如果直接在mono中打断点是不起作用的,需要再点击mono的run按钮,此时弹出Attach to Process对话框,如图: 选中其中的Unity Editor (U ...

  10. Atitit.部分错误 设计模式,异常处理框架atiPartErr 的总结

    Atitit.部分错误 设计模式,异常处理框架atiPartErr 的总结 1. 流程图 1 2. Java 类关系结构图片 1 3. 错误信息结构 1 4. 调用 2 4.1. 收集错误信息 3 4 ...