上传文件内容改变和上传文件

最新推荐文章于 2024-01-25 14:50:30 发布

原创最新推荐文章于 2024-01-25 14:50:30 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java #ViewUI

AngularJS 专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个使用AngularJS进行文件上传的简单示例。通过HTML与AngularJS结合的方式，实现了选择文件并发送到服务器的功能。该示例利用了FormData对象来处理文件，并通过$http服务以POST方式发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-controller="myController">
    <input type="file" id="mainPic"
           onchange="angular.element(this).scope().menuPicChanged(this.id)">
</div>

</body>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope,$http) {
        $scope.aa = "123456";

        $scope.menuPicChanged = function (id) {
            console.log("menuPicChanged-----------------------------");
            console.log('id == ' + id);

            var file = $("#" + id)[0].files[0];
            console.log('file == ' + file);

            var fd = new FormData();
            fd.append('file', file);
            fd.append('menuId', $scope.aa);
            $http({
                method: 'POST',
                url: "http://119.23.313.212:80/common/CookerRecipeManngeController/mainPicSave",
                data: fd,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).then(function successCallback(response) {
                alert("保存成功！")
            }, function errorCallback(response) {
                alert("url 请求数据错误!")
            });
        };
    });
</script>
</html>