js文件上传(jquery、FileReader、Blob、FormData)

不能懒鸭

已于 2022-02-14 11:08:33 修改

阅读量1.8k

点赞数 1

分类专栏：工作总结文章标签：前端 jquery

于 2021-11-22 14:26:01 首次发布

本文链接：https://blog.csdn.net/m0_45382009/article/details/121470452

版权

本文演示了如何使用jQuery、FileReader、Blob和FormData，重点在于从上传文件中仅提取文件名称和文件流，以传递给后端。在回调中，通过this.result获取文件流进行进一步操作。

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

代码演示：只取文件名称、文件流两个字段传给后端，其他字段未演示

在这里插入图片描述

文件名称：<input type="text" name="fileName"  id="fileName"/>
<input type="file" name="fileUpload"  id="fileUpload"/>
<button type="button"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不能懒鸭

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

BLOB对象的上传与下载，前端JS、后台node.js

qq_29092379的博客

01-09

8838

1：背景 react编项目的时候遇到一个需求，实现作品的保存与下载编辑功能：将网页上的blob对象上传到服务器，以文件的形式保存；下载服务器的作品到网页上进行编辑，读取文件内容并发送到前端。当前只记录实现的流程，blob对象具体的解释见文章底部的参考链接 2：blob上传 2.1：前端操作：上传使用jquery的ajax提交文件上传 var fd = new FormDat...

h5上传图片html5,h5图片上传简易版（FileReader+FormData+ajax）

weixin_33231055的博客

06-09

1518

一、选择图片(input的file类型)1. input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口；file类型的input会有files属性，保存着文件的相关信息。2. input.files是一个数组，由传入的file对象组成。每个file对象包含以下属性：lastModified：数值，表示最近一次修改时间的毫秒数；lastModifiedDate：对象，表示最后一...

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

filereader:filereader，一个用于读取本地文件的 jQuery 扩展

06-26

文件阅读器 filereader，一个用于读取本地文件的 jQuery 扩展这组实用程序允许我们直接从 jQuery 访问 HTML5 FileReader API。可用功能： $.canReadFiles() 如果当前浏览器实现了 FileReader API，则返回 true $.getFilesFromEvent(event) 参数事件必须是一个类似“drop”事件参数的事件（这样你就可以得到被丢弃的文件），或者“change”输入事件参数（这样你就可以在输入时获得对选定文件的引用[ type="file"] 元素已更改）返回一个 File 对象数组 $.fileReader() 返回一个 jQuery 对象（一个 FileReader 实例的包装器）创建后，此实例公开：特性： $fileReader.file：对正在读取的 File 实例的引用。方法： $

ajaxfileupload.js ajax上传文件(含application/json)

weixin_34178244的博客

01-10

127

jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.c...

JS上传大文件的三种解决方案

最新发布

alisky119的博客

09-18

1168

前端：vue2,vue3,vue-cli,html5,webuploader后端：asp.net,jsp,springboot,php,数据库：MySQL,Oracle,SQL Server,达梦,人大金仓,国产数据库功能：超大文件上传,文件和文件夹批量上传，断点续传，加密上传，视频上传技术：百度webuploader，分块，切片，断点续传，秒传，MD5验证，纯JS实现，支持第三方软件集成要求：免费,开源,永久技术支持。

js blob 文件上传

betterangela的博客

06-22

1556

js blob 上传

js发送blob php接收,jquery - javascript如何上传blob？

weixin_31315567的博客

03-20

531

jquery - javascript如何上传blob？我在这个结构中有一个blob数据：Blob {type: "audio/wav", size: 655404, slice: function}size: 655404type: "audio/wav"__proto__: Blob它实际上是使用最新的Chrome getUerMedia()和Recorder.js录制的声音数据如何使用j...

借助FileReader实现将文件编码为Base64后通过AJAX上传

09-03

AJAX（Asynchronous JavaScript and XML）技术能够实现在后台与服务器进行通信，而无需刷新整个页面，然而它本身并不直接支持文件上传。这时，我们可以借助FileReader API和Base64编码技术来解决这个问题，实现类似...

jQuery移动端图片文件上传插件特效代码

03-20

`jQuery`作为一款广泛使用的JavaScript库，为开发者提供了丰富的功能和便利性，包括处理移动端图片上传。本文将深入探讨`jQuery`移动端图片文件上传插件的实现原理和关键知识点。首先，我们要理解`jQuery`移动端...

基于jQuery和HTML5实现的带进度监控的文件上传插件.zip

02-12

3. **文件上传**：使用FormData对象封装文件，FormData可以附加到XMLHttpRequest（XHR2）对象上，通过`append`方法添加文件。然后，使用`XMLHttpRequest`的`send`方法发送POST请求到服务器。 4. **进度监控**：在...

ajaxfileupload 附加参数

weixin_34404393的博客

09-21

125

jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { ...

JS blob 文件（需要

07-13

浏览器生成文件并下载，IE10以上，FF，chrome均可。

springboot+jquery上传blob数据到数据库

FirstDay_LYLY的博客

10-17

1162

#springboot+jquery上传blob数据到数据库 ##问题描述我的项目需求是：数据库有blob类型数据，在页面表单显示blob数据用按钮的形式，提供上传数据和下载数据到客户端两个功能。以下是在我的电脑上的测试，项目电脑不可联网，无法提供实际代码。 ##我的测试代码 ###要导入依赖由于报错：No Suitable Driver Found For Jdbc；原因：少导入了一个包...

js jQuery FileReader() 实现图片上传展示支持多个图片上传

FYANGFEI的博客

07-26

4323

1效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascri

能够正常使用的，经过测试的java+jquery+webcam调用本地摄像头拍照，然后将拍照结果上传数据库blob字段功能的实现（一）

weimeixiehou的博客

08-04

8433

近期项目中有调用本地摄像头拍照然后将拍照结果上传数据库blob字段的需求，想了很多的解决方案，由于各种原因都pass掉了，几经周折，最终决定采用jquery webcam这个jquery网络摄像头插件。这里是他的官方网站（应该是吧：））点点点 jquery网络摄像头插件官网。但是各位看官可能会发现，我勒个去，英文的+PHP的+案例挺简单的+上网搜各种搜不全的+...，反正接下来的时间是陷入

JS___Blob处理二进制数据分片上传

qq_43248623的博客

06-14

1729

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl

使用html5原生js对象FileReader+jQuery ajax实现文件上传并显示上传进度关键代码（兼容IE9、IE10、IE11）

非凡忍者的博客

12-03

791

最近在项目前端页面中需要上传文件，由于第三方插件弹出界面不符合要求以及可能会有安全隐患，准备采用html5的FileReader实现。 FileReader的兼容性目前已经很不错了，但在IE浏览器上会存在一个问题：不支持其中的readAsBinaryString方法，但支持readAsDataUrl方法。这个问题也容易解决，至少还不至于不能用。 html <input type="file" accept=".rar,.zip,.gz" id="file"> js var fileinfo =

js中blob对象介绍和实现切片上传