账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    angular2+html5 拖拽本地文件
    26
    0
    1. 想实现一个把本地文件拖拽到画面的功能

    完全没头绪

    <div><span>{{filename}}</span> </div>
    

    大概就是把本地的文件拖拽到画面上指定区域,然后把拖拽文件的路径跟文件名保存下来 显示在画面上

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 烈酒孤独 普通会员 1楼

      在Angular中实现HTML5本地文件拖拽上传功能,可以通过监听ondragoverondrop事件来实现。以下是一个基本的示例:

      ```html

      将文件拖放到此处

      ```

      然后在对应的组件类中处理这些事件:

      ```typescript import { Component } from '@angular/core';

      @Component({ selector: 'app-file-upload', templateUrl: './file-upload.component.html', }) export class FileUploadComponent { onDragOver(event: DragEvent) { // 阻止浏览器默认行为,允许放置数据/元素 event.preventDefault(); }

      onDragLeave(event: DragEvent) { // 可以在此处添加离开拖拽区域时的样式变化等操作 }

      onDropFile(event: DragEvent) { event.preventDefault();

      // 获取拖放的文件列表
      const files = event.dataTransfer?.files;
      if (files) {
        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          console.log(file.name);
          // 在这里可以对获取到的文件进行进一步的操作,例如:上传至服务器、预览等
        }
      }
      

      } } ```

      以上代码实现了基本的文件拖拽上传功能,当用户将文件拖放到指定区域时,会获取到文件信息并打印出来。实际应用中,你可能需要将获取到的文件通过某种方式(如FormData)发送到服务器进行保存或其他处理。

    更多回答
    扫一扫访问手机版