前端对文件的操作以及提交

最新推荐文章于 2024-05-12 21:59:00 发布

「已注销」

最新推荐文章于 2024-05-12 21:59:00 发布

阅读量375

点赞数

分类专栏： differ

本文链接：https://blog.csdn.net/zzyxs5543/article/details/85050863

版权

本文介绍了前端对文件的操作，包括使用HTML5的file上传组件，通过onchange事件获取文件信息，如name、size和type，并利用FileReader进行异步读取文件到内存。

摘要由CSDN通过智能技术生成

(查看资料https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader、

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data）

前端对文件操作的知识点：

1、h5文件上传组件，将type设置为file，当文本域改变的时候，onchange事件触发,accept为设置可见的文件类型

<input type="file" id="file" onchange="uploadFile()" accept="">

2.获得文件的name,size,type等属性值

<input type="file" id="file" onchange="uploadFile()" accept="">

  uploadFile(){
    let file=document.querySelector("#file");
    
    //获得文件的name,size,type,
    let fileName=file.files[0].nam

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端关于文件操作的小知识点

weixin_44953633的博客

05-25

313

前端关于文件操作的小知识点前言在前端的开发中，文件的相关功能似乎并不像后端那样使用频繁，但是有时我们也会遇到需要传输、查看或下载文件的功能需求，我就来简单总结一下前端文件的操作知识。出于安全考量，操作系统分配给浏览器的权限较低，而单个网页所拥有对用户电脑操作的权限就更低了，这是为了防止因用户的操作不当导致恶意网页随意增删改动用户本地的文件，所以在前端网页中所有的文件操作必须全都由用户来主动操作触发文件上传。文件的上传通过input 的type：file 选择本地文件 <for

前端页面上实现表单提交文件上传功能

shandow_的博客

12-23

4213

提示：新手刚刚初学java，希望和大家多多交流文章目录前言一、文件上传的三要素是什么？二、具体使用步骤1.前端页面代码2.后台代码接收3.在springMVC的配置文件中添加文件上传解析器4.在服务层实现对文件的上传功能的封装总结前言在页面上实现文件的上传功能一、文件上传的三要素是什么？文件上传的三要素： 1.表单post请求 2.input框的type=file 3.在form表单中添加enctype=“multipart/form-data” 二、具体使用步骤 1.前端页面代码代码如下

参与评论您还未登录，请先登录后发表或查看评论

使用layui前端框架弹出form表单以及提交的示例

01-21

第一步: 引用两个文件第二步: 点击删除按钮弹出提示框 /*删除开始*/ $(.del).click(function () { var id = $(this).attr(id); layer.alert('您确定要删除操作吗?', { skin: 'layui-layer-molv' //样式类名自定义样式 , closeBtn: 1 // 是否显示关闭按钮 , anim: 1 //动画类型 , btn: ['确定', '取消'] //按钮 , icon: 6 // icon , yes: function () { //layer.msg('确定') $.ajax({ t

前端中那些与文件有关的操作

bboyjoe的博客

05-05

342

1.pc端拖拽文件并读取内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件拖拽读取内容</title> <style> #div1{

Web前端操作文件

carcarrot的博客

08-25

1288

在web应用程序中使用文件通过使用在 HTML5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的<input type="file">元素或者是通过拖拽来选择本地文件。如果你想通过扩展或者其它的chrome源码浏览器（browser chrome code）使用DOM File API，是可行的；然而，需要注意有一些附加特性。详细请见Using the DOM File API in chrome ...

web前端之文件上传

weixin_34368949的博客

07-29

342

前言最近太忙一直没时间认真的写博客（哈哈哈），最近pm提一个需求，移动端需要一个上传图片的功能，允许多选、删除、预览、点击查看大图并可以滑动。虽然听起来很多，但是这个功能在web上实现过啊，使用webuploader妥妥的，然后就拍着胸口答应了下来，并让B同事做。开发完成后，后端说同一次上传多张图只能发一次请求，纳尼。。我没仔细看过webuploader的API，不知道为什么需要单独进行上...

【前端】-【前端文件操作与文件上传】-【前端接受后端传输文件指南】

CaraYQ的博客

05-05

6462

/ 进度条可以用axios的onUploadProgress方法，且发送切片时可以并行发送请求，后续可以自行优化。// 将切割后的Blob对象转成File对象（第二个参数是文件名），之后就可以上传切割后的File对象。// multiple的多文件上传其实很不友好，需要用户在选择文件时按住ctrl多选，否则就会变成单选。// 直接将转换结果赋值给img的src，设置src的大小即可获得浓缩图。//切片上传，在上传的时候进行切片，文件改变时只赋值。// 使用blob的slice方法可以切割文件。

前端实现文件的断点续传(前端文件提交+后端PHP文件接收)

09-01

总的来说，前端实现文件的断点续传涉及到了HTML5的新特性、JavaScript的文件操作以及与服务器的交互，通过合理的前端和后端配合，可以提供高效且用户体验良好的文件上传功能。虽然存在一些挑战，但随着技术的发展，...

前端页面文件拖拽上传模块js代码示例

10-19

【前端页面文件拖拽上传模块js代码示例】是一个实用的前端...总的来说，这个示例涵盖了前端开发中的多个重要概念，包括拖放交互、文件API、AJAX上传、DOM操作和UI设计，是学习和实践前端文件上传技术的一个良好起点。

异步提交多文件上传

04-13

这个主题涉及到前端、后端以及文件压缩等多个技术层面。以下是对这些知识点的详细解释： 1. **多文件上传**：多文件上传是指用户可以在一次操作中选择并上传多个文件，而不是逐个上传。这提高了用户体验，减少了...

网页前端开发中的文件操作

Mr_Chenn的博客

04-05

637

一、原生HTML组件 HTML中有一个<input type = "file">可以用来上传文件的。像这样，就可以取到原生HTML5组件所上传的文件。 <input type="file" id="xlf" /> $("#xlf").change( function(e){ console.log(e.target.files); }) 要用的话就...

前端页面上传并操作文件

weixin_43065691的博客

12-11

360

废话不多说，直接上代码 <body> <input type="file" id="files" style="display:none" onchange="chooseFile()" > <a id="import" class="btn btn-primary btn-sm">导入</a> </body> <script...

前端浏览器支持的JS文件操作技术介绍

cnds123的专栏

12-13

1974

本文介绍前端浏览器支持的JS文件操作技术。通过使用在 HTML5 中加入到 DOM 的 File API，使在 web 内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过 HTML 中的元素或者是通过拖拽来选择本地文件。

H5之前端操作文件

QW3223的博客

06-19

164

js是否能够操作文件? js在HTML5以前浏览器端是无法操作文件的，但HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载（目前只有chrome、firefox和opera支持）。HTML5还提供了FileReader接口，其中包括接口有4个方法，其中3个用来读取文件，另一个用来中断读取。 ajax能否操...

随笔-前端文件操作 File, Blob, ArrayBuffer 以及FileReader

程序员阿甘的博客

12-30

3521

前端文件操作浏览器由于安全性要求，不允许JS直接获取主机的文件系统上的文件，只能通过HTML标签input[type=file]来由用户选择可以被浏览器操作的文件。那么input[type=file]标签选择的文件，会被如何保存呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"

前端学习笔记202305学习笔记第二十五天-文件操作总结

qq_41632427的博客

06-09

前端

吃透前端文件上传与文件相关操作