使用 angularjs 在本地驱动器中上传文件

2024-04-07

我是 angularjs 的初学者。 我读了很多关于文件上传等的内容。 但找不到我将进一步描述的此案例的任何主题。

我想在下面的代码中通过按钮(带有搜索名称)来选择一个文件

然后,当我们单击第二个按钮(带有上传名称)时,我选择在我制作的本地驱动器中上传文件D:\上传的文件 already

例如 我想使用搜索按钮从桌面选择一个文件,然后当我们单击上传时,该文件复制到 D:\Uploaded Files

如果可能的话请在 fiddler 中告诉我。 谢谢大家。

感谢大家的分享


您需要使用如下指令。

uploader.directive("readfile", [function () {
    return {
        scope: {
            readfile: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.readfile = { "FileName":changeEvent.target.value.split('\\').pop() , "Content":loadEvent.target.result , "Size":loadEvent.total };
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

对于上传文件:

function MyCTRL($scope, $http, $modal)
{
    $scope.currentFile="";

    $scope.currentFileGroup="";

    $scope.currentFileDescription="";

    $scope.attachedFile=[];

    $scope.fileUpload=function () 

    {

    $scope.attachedFile.push ({

        "fileGUID": GUID() + "." + $scope.currentFile.FileName.split('.').pop(),
        "fileName": $scope.currentFile.FileName,
        "fileGroup": $scope.currentFileGroup,
        "fileDescription": $scope.currentFileDescription,
        "fileSize": $scope.currentFile.Size,
        "fileContent": $scope.currentFile.Content,
        "fileState": "wait"
    });

    $scope.currentFile = "";
    $scope.currentFileGroup = "";
    $scope.currentFileDescription = "";
    $scope.AddBtnShow=false;

    var saveFile = new dataStructure();
    var fileContent = "";
    for (var i=0; i < $scope.attachedFile.length; i++) {
        if($scope.attachedFile[i].fileState!="sent") {
        fileContent = $scope.attachedFile[i].fileContent;
        saveFile.EntityInfo[0].Name = $scope.attachedFile[i].fileGUID;
        saveFile.EntityInfo[0].Type = "CUSTOMFILE";

            saveFile.EntityData = [
                {"Content": fileContent}
            ];
            var inputjsondata = JSON.stringify(saveFile);
            $http({ method: 'POST', url: rootURL + '/data/savefilecontent', data: inputjsondata, dataType: 'text', processData: false, async: false, headers: { 'Content-Type': 'application/json; charset=utf-8' } }).success(function (data) {
            });
            $scope.attachedFile[i].fileState = "sent";

            $scope.formData.Attachments.push({
                "FilenameGUID": $scope.attachedFile[i].fileGUID,
                "Filename": $scope.attachedFile[i].fileName,
                "Group": $scope.attachedFile[i].fileGroup,
                "Description": $scope.attachedFile[i].fileDescription,
                "UploadDate": uploadGregorianDate()                    
            });
        }
    }
};

现在一切都很好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 angularjs 在本地驱动器中上传文件 的相关文章

  • 在 Angularjs 中格式化输入值

    我正在尝试编写一个指令 自动格式化数字
  • AngularJs 从自身调用内部服务函数

    我构建了一个发出多个请求的简单服务 该服务有两种方法 我无法从服务内的另一种方法调用一种方法 Plunkr http plnkr co edit 2fERik4uTxbxlVOhncMd p preview http plnkr co ed
  • 角度 ui 路由器的动态参数

    我想知道在更改状态并发送请求以从后端获取模板时如何包含参数 这是我的应用程序 angular module questionnaireApp ngAnimate ui router ui bootstrap config stateProv
  • 在 Karma+AngularJS 测试中加载模拟 JSON 文件

    我有一个 AngularJS 应用程序 使用 Karma Jasmine 设置了测试 我想测试一个函数 它接受一个大型 JSON 对象 将其转换为应用程序其余部分更容易使用的格式 然后返回转换后的对象 就是这样 对于我的测试 我希望您有单独
  • 在 Angular ui-router 中更改状态而不更改浏览器历史记录

    假设我们有这样的逻辑 从状态A改变到状态B 每当我们到达状态 B 时 应用程序总是通过调用将我们重定向到状态 C state go stateC 现在我们处于状态C 我的问题是如何从状态 C 返回状态 A 考虑到状态 A 可以是我们在运行时
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • 为 HTML5 Django Web 应用程序实现实时通知系统

    我目前正在开发一个由 Django apache 提供服务的 HTML5 Web 应用程序 该应用程序的目标是监视多个设备 所有客户端逻辑都是用 Angular 编写的 所有数据都来自对后端进行的基于 JSON 的类似 REST 的调用 我
  • 使用 Django ModelForm 上传个人资料图片

    我环顾过相关问题 但似乎没有一个答案有效 我正在尝试上传用户的个人资料图像并让它替换 覆盖 当前图像 保存图像后 我想将文件名更改为用户 ID 图像将以当前形式上传 但不会替换现有图像 例如 它将保存为 2 1 png class Phot
  • 如何使用 $http.get 获取 304 状态代码?

    如何使用 http get 获取 304 状态代码 http get menu json success function data status headers scope menu data console log status sho
  • 函数调用后的两组括号

    我正在寻找如何filters http docs angularjs org api ng 24filter在 Angularjs 中工作 我发现我们需要发送 2 组括号 filter number number fractionSize
  • cordova.js 导致引用错误“未定义需求”

    我想用恩科尔多瓦检测设备的网络状态 然而 一旦我包括科尔多瓦 js我收到一个错误 未捕获的引用错误 未定义 require cordova js 23 我已经安装并成功运行Node js and Cordova 我已经下载并安装了恩科尔多瓦
  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 包含routeChangeSuccess的AngularJS测试控制器

    我正在尝试创建单元测试来测试导航列表控制器 但在创建测试时遇到问题 这是控制器的代码 navListModule controller NavListCtrl scope NavList function scope NavList sco
  • 从指令动态地将角度属性添加到元素

    我正在尝试构建一个指令来更改缓慢的 ajax 调用按钮上的加载状态 基本上 这个想法是为按钮元素设置一个属性 ng loading 并让指令添加其余的内容 这是html代码
  • 如何销毁角度工厂实例

    一方面 我有几个工厂 每个工厂都控制一个 websocket 另一方面 其中一个工厂应该在客户端登录时启动 因此 if user isLogged injector get NotificationsWebsocket 这就是我动态初始化工
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 JS 在 Angular 中创建删除按钮的确认警报

    我有一个带有删除按钮的表单 我想创建一个单击删除按钮时弹出的确认框 删除按钮当前有效 我在 javascript 中尝试了一些方法 但没有成功 我正在使用角度 这是最好的方法吗 另外 有谁知道这方面的任何例子 我还没有找到任何有效的例子 d
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化

随机推荐

  • 将下载的 torrent 保存在内存中而不是文件 libtorrent

    使用 Rasterbar libtorrent 我不希望下载的数据放在我的硬盘上 而是放在管道或变量或软的东西上 这样我可以将其重定向到其他地方 Mysql 甚至垃圾 如果它不是我想要的 有没有如果不是使用 Libtorrent 在 C 中
  • 如何同时编译 .Net 3.5 和 4 的项目

    我需要为 Net 3 5 和 Net 4 0 编译一个项目 做到这一点的最低摩擦方式是什么 如果我从另一个程序集引用该项目 如何确定目标运行时 或者我应该直接引用二进制文件 我只需通过两个 csproj 文件来完成此操作 然后我可以轻松设置
  • 如何处理 Web 版 Twitter 数字 API

    我正在研究 Twitter 数字 api 将其集成到我的网站 该网站需要验证用户的唯一性 这里有一个link https dev twitter com twitter kit web digits 这是唯一一篇正式说明如何在网络上实现数字
  • 使用 Delphi 2010 进行远程调试时没有断点 - 所以卡在 Delphi 7 上

    去年 8 月进行初步调查后 我又重新开始使用 Delphi 2010 进行远程调试 我已确保 D2010 具有更新 4 和 5 并且远程调试器是 Embarcadero 网站上的最新版本 遵循非常有用的说明here http delphi
  • 如何删除 Perforce 中的工作区(使用 p4v)?

    我是 Perforce 的新手 创建了一些工作区作为熟悉它的练习 现在我想删除一些工作区 我只想删除工作区 以便它们不会出现在工作区视图的下拉列表中 do not想要对实际的仓库文件执行任何操作 谷歌搜索答案会产生 使工作区处于活动状态 的
  • 如何在docker中运行mongod后运行mongorestore

    我正在尝试使用 docker 设置一个 mongodb 服务器 让它从网络下载转储并用该信息填充它 我的问题是我可以让它运行并填充数据库 但完成后 它就会关闭 这就是我解决问题的方法 sudo u mongodb usr bin mongo
  • 无法将脚本文件添加到组件 html

    我在index html root 中有一个脚本文件引用 索引 html 这里不需要 sliderfunctions js 它包含一些关于 slider 的特定功能 所以我将它携带到 slider component html 文件 但正如
  • java 图像转换为矩阵

    有一个非常简单的 jpg 图像 我想将其转换为矩阵 但是使用 getRGB i j 指向像素会给出 ArrayIndexOutOfBounds 的运行时异常 以下代码对图像大小有限制吗 它只是显示整个图像中获得的第一个颜色代码 Buffer
  • 路由跟踪如何工作? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 这看起来几乎是神奇的 为了绘制到 Internet 上某个其他节点的整个路径 traceroute 命令执行什么操作 Traceroute 将 TTL
  • Android Room,如何保存一个实体,其中变量之一是密封类对象

    我想在我的 Room 数据库中保存一个对象 其中一个变量可以是一种类型或另一种类型 我认为密封类是有意义的 所以我采取了这种方法 sealed class BluetoothMessageType data class Dbm val da
  • 如何获取和设置 ag-grid 状态?

    如何获取并重新设置 ag grid 表的状态 我的意思是 正在显示哪些列 以什么顺序 使用什么排序和过滤等 Update getColumnState 和 setColumnState 似乎接近我想要的 但我无法弄清楚应该保存和恢复状态的回
  • 取两个变量作为日期和时间并组合起来形成一个日期

    我想采用两个变量 一个代表日期 另一个代表时间 然后将它们组合起来形成一个日期 然后我想使用该组合日期和时间来检查当前日期和时间是否距组合日期和时间 24 小时或更短 game date game date game time game t
  • 如何使用 INLINE CSS 将 Excel 电子表格导出到 HTML 表格?

    我想知道如何将电子表格中的表格转换为 html 格式 而无需所有 Microsoft 特定代码 我们的网页托管在其他地方 这意味着我无权访问我们页面的一部分 我们只能将内容插入 我只是希望表格保留相同的字体 边框和格式 并将任何和所有 CS
  • JSF 2.0 View Scope 后退按钮安全吗?

    JSF 2 0 View Scope 后退按钮 安全吗 例如如果我将模型存储在 View Scope 中 并从第 1 页 第 2 页 第 3 页到第 4 页 一路修改模型对象 通过输入字段 然后按两次后退按钮返回第 2 页并进行更改 再次将
  • 如何查看sql server表中已删除的记录? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我需要从sql server表中查看已删除的记录 行 实际上我正在使用这个命令 DBCC LOG My
  • kaminari 和 order_by

    因此 我列出了我网站的所有成员 并按名称对他们进行分组 以便更好地组织列表 因此 在我看来 我的所有成员均按其成员姓名的第一个字母分组 例如 B Bakedfish Beercan Dan Bigmike33x C Cynicalassas
  • 列出 Notion 上集成访问的所有数据库

    有没有更有效的方法来获取所有数据库的列表 我尝试过使用https api notion com v1 databases端点 但现在已弃用 另一种选择是 search端点 但它也返回数据库中的所有记录 有人可以提供更好的方法来列出集成访问的
  • 无法读取 R 中的 shapefile

    我尝试使用以下代码在 Mac 上打开 shp 文件 library tidyverse library sf library rgeos sf trees raw lt readr read csv https raw githubuser
  • 使用 RSelenium 读取下拉菜单元素中的值

    我正在使用 RSelenium 导航到站点并与元素交互 问题 使用 RSelenium 如何读取下拉菜单中的选项列表 以便我可以识别可用的最新月份并使用它将下拉菜单设置为正确的值 On 某个网站 http jamaserv jama or
  • 使用 angularjs 在本地驱动器中上传文件

    我是 angularjs 的初学者 我读了很多关于文件上传等的内容 但找不到我将进一步描述的此案例的任何主题 我想在下面的代码中通过按钮 带有搜索名称 来选择一个文件 然后 当我们单击第二个按钮 带有上传名称 时 我选择在我制作的本地驱动器