关于input type="file"表单提交及文件流的动态赋值

最新推荐文章于 2025-04-26 08:42:21 发布
最新推荐文章于 2025-04-26 08:42:21 发布
阅读量1.5w 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cynl7/article/details/82839977
本文探讨了HTML5中input type=file元素的使用，详细介绍了如何通过JavaScript操作fileList对象来实现文件上传功能，特别是在用户取消上传时如何保存并重新加载已选文件。

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

我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 。

页面上写一个input,然后选择一个文件，打印这个input对象

$('.up-file').on('change',function(e){ //上传				
	console.log( e.currentTarget)
})

input的选择的文件被记录到了这个对象中，这个是fileList对象，是一个只读对象不能修改

当文件上传我们选择取消时其实是需要对input的fileList赋予它上一次选中的文件流

这里主要说一下，怎么用js给input赋值，而手动的去选择文件

因为文件在上传的时候点击了

当上传时点击了取消，文件就会被清空，现做兼容处理为赋予其上一次选择的文件

取出files后，用$('.pub-dialog .up-file')[0].files=files;将文件赋值给input，注意赋值的必须是fileList对象，不要试图只放进去一个文件，fileList只读

然后正常的提交就可以了

参考原文地址为原文地址

文件选择上传/拖拽上传前端对＜input type=‘file‘＞赋值方法
10-19 2313
一、常规文件上传 1_1、前端html页面代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常规文件上传</title> </head> <body> <form action="xxx/upload" method="post" id="fileUploadForm...
java web页面input type="file"文件上传
lajiwaanyi的博客
08-19 3693
页面input上传图片保存到本地并且展示图片 方法1：使用js方法进行图片展示，然后发送请求保存文件 1、点击上传文件按钮，触发点击事件 2、js文件，展示图片 3、文件上传，因为图片已经展示，只进行图片的上传。怕有些萌新不知道如何组合代码，将图片展示的代码也一起展示 <script> // 为表单绑定异步上传的事件 function uploa...
给一个file类型的input 赋值
热门推荐
lingdian1614114082的博客
01-16 2万+
这个应该是不可以的，必须重新使用用文件对话框选择。 这是处于安全的考虑，不能直接对input type=file的类型赋值，因为直接用JS就可以将你本地文件直接取到指定地点，就没有安全性可言。 因此必须对一个input type=file设置一个按钮来打开文件选择框的目的就是选择文件必须让用户知道并且决定是否要选择一个文件，直接赋值是没有作用的。 所以file.value = "xxxx ", 是...
用JS为 <input type=file>的value属性动态赋值
mickey188的博客
02-22 7241
用JS为 的value属性动态赋值 在 HTML 文档中 ， 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file-upload 元素的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略。不过有时候我们需要将这个标签的value的值清空，这就需要我们动动脑筋了。 假设我们已经得到了该...
如何通过脚本给<input type="file">的控件赋值
听雨轩
09-17 3241
    今天一个朋友问我,如何在页面上自动给&lt;input type="file" /&gt;赋值,这个问题我以前也没实现过,今天小研究了一把.    把&lt;input type="file" /&gt;设计只读且不允许自动赋值的目的是出于安全性考虑,试想一下,如果允许程序自动赋值,那么也可以在服务器生成页面时放置一段脚本,在浏览器访问该页面后,自动把本地的某一个重要文件路径赋值到一个文件...
h5给input元素type=file的对象赋值报错
Alex的博客
02-20 1665
Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string <input type="file" class=" form-control hide" placeholder="文件地址" id="filePath" /> $("#f.
input file的默认value清空与赋值方法
12-07
在网页开发中，`<input type="file">` 是一种用于让用户选择本地文件的表单元素。有时，开发者可能需要对这个元素的默认值进行处理，例如清空或赋予初始值。本文将介绍三种不同的方法来实现这一目标，分别称为...
input file获得文件根目录简单实现
10-27
在这个例子中，我们创建了一个表单，其中包含一个文件输入字段（`<input type="file">`）和一个隐藏输入字段（`<input type="hidden">`）。当用户选择一个文件后，点击提交按钮，`show_root`函数会被调用。 **...
将input file的选择的文件清空的两种解决方案
09-04
在网页表单中，`<input type="file">`元素用于让用户选择本地文件进行上传。在某些场景下，用户可能需要清空已选择的文件，例如在错误选择或需要重新选择文件时。本文将详细解释两种不同的方法来实现这一功能。 ###...
关于jsp<input type='file'/>赋值的问题
open404的博客
03-08 817
浏览器出于安全考虑，不能给jsp的value赋值，如果能够给它赋值的话，服务器端就很容易的获取到客户端的信息了，如果是这样想谁都不会愿意吧！ 例如：我建了个网站，设置了一个隐藏域，是file类型，它的value是“你的银行密码.txt”，你访问我的网站，我的服务器端就能获得你的银行卡密码了，这样你是不会愿意的吧！ 所以出于安全考虑不能给jsp的value赋值。要把文件上传到服务器上只能按照上传...
js 获取、清空input type=file的值(示例代码)
12-08
上传控件（<input type=”file”/>）用于在客户端浏览并上传文件，用户选取的路径可以由value属性获取，但value属性是只读的，不能通过 javascript来赋值，这就使得不能通过value=””语句来清空它。很容易理解为什么只读，如果可以随意赋值的话，那么用户只要打开你的网页， 你就可以随心所欲的上传他电脑上的文件了。 js 获取的值 代码如下:<html>[removed]  function   show(){  var   p=document.getElementById(“file
javascript input自动赋值
05-15
编辑页面上能给input自动赋值.zip包中例子。
冲击多个Input File赋值兼解决中文赋值问题!
02-12
解决无法为FIle控件赋值的问题！并且支持中文赋值问题。
HTML input type=“file“
最新发布
monian187的博客
04-26 1854
html input type="file"
jquery input[type=“file“拖拽上传/选择文件上传
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-28 1439
jquery 拖拽上传upload
JS实现Html File控件赋值
自信工作,自信生活
09-06 2865
网上搜索了半天也没有完整的解决方案。用以下方法需要添加到信任站点或解除未签名的ActiveX控件的禁用   1. 模拟键盘输入法: 不足的地方是不支持中文     把&lt;input type="file" /&gt;设计只读且不允许自动赋值的目的是出于安全性考虑,试想一下,如果允许程序自动赋值,那么也可以在服务器生成页面时放置一段脚本,在浏览器访问该页面后,自动把本地的某一个重要文件路径...
<form action="login.php" method="get" onclick="alert"> <script> function test() { var a=document.getElementsById('username').value; var a=document.getElementsById('password').value; alert(a); } </script> 用户：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> 男：<input type="radio" name="sex" value="nan"> 女：<input type="radio" name="sex" value="nv"><br> 打游戏：<input type="checkbox" name="xq"> 听音乐：<input type="checkbox" name="xq"> 看小说：<input type="checkbox" name="xq"><br> <select id="2" name="city" > <option>成都</option> <option>广安</option> <option>北京</option> </select> <input type="file" name=""> <textarea id="1" name="" rows="5" cols="4"></textarea> <input type="button" value="提交" name= "" > <button>注册</button> </form> <script src="test.js"></script> </body>
03-08
<think>嗯，我现在要分析用户提供的这段HTML代码，看看里面有什么问题。首先，用户可能想知道这段代码有什么错误，或者如何改进它。我需要仔细检查每个部分。 首先看表单部分，`<form action="login.php" method="get" onclick="alert">`。这里有一个`onclick`事件直接写在form标签里，但是值只有"alert"，这应该是个错误。因为alert函数需要参数，比如`alert('消息')`，现在这样点击表单时可能不会执行任何有效的弹窗，或者会报错。 接下来是JavaScript的函数test。里面有两处问题：`document.getElementsById`，正确的方法名应该是`getElementById`，因为getElementsById是不存在的，正确的单数形式是getElementById，而getElementsByClassName或getElementsByTagName才是复数。然后，两次都用了var a=...，导致第二个赋值覆盖了第一个，应该是分别获取username和password的值，存储到不同变量中，比如var a和var b。另外，函数里可能想获取的是password的值，但两次都用了相同的变量名a，这显然有问题。 然后是表单内的各个输入元素。比如单选按钮（radio）的name都是"sex"，这没问题，可以正确分组。但复选框（checkbox）的name都是"xq"，这样提交时多个同名的复选框会如何处理呢？可能需要不同的value或者用数组形式，比如name="xq[]"，不过这可能取决于后端处理方式。不过这里用户可能只是练习，所以问题不大，但需要注意。 下拉菜单`<select id="2" name="city">`，这里的id是数字"2"，虽然HTML5允许id以数字开头，但最好使用字母开头，避免潜在的问题。此外，选项的value属性没有明确指定，比如`<option value="成都">成都</option>`，否则提交时可能会用选项的文本内容作为值，但这也是可接受的，不过显式指定value更好。 文件上传的input是`<input type="file" name="">`，这里name属性为空，提交时可能无法正确传递文件数据，应该给一个name，比如name="file"。 textarea的id是"1"，同样的问题，最好用字母开头的id，比如"desc"。而且name属性为空，可能需要指定name以便后端处理。 提交按钮`<input type="button" value="提交" name= "" >`，这里type是button，点击后不会触发表单的提交，应该改为type="submit"。或者如果保持type="button"，需要绑定onclick事件来提交表单。现在的代码中按钮没有提交功能，表单可能无法提交。 另外，按钮`<button>注册</button>`在表单中默认类型是submit，所以点击它会触发表单提交，但可能和提交按钮的预期不同，需要注意。 最后，script标签引用了test.js，但之前已经有一个内联的script，可能需要确认路径是否正确，不过这可能只是示例。 总结一下，主要问题包括： 1. getElementById拼写错误，变量重复赋值。 2. 表单的onclick事件处理不正确。 3. 提交按钮类型错误，无法提交表单。 4. 文件输入和textarea的name属性缺失。 5. id命名不规范，使用数字开头。 6. 复选框的name相同可能影响数据提交。 接下来要一步步解释这些问题，并提供修正后的代码示例。</think>您提供的代码是一个包含表单和脚本的HTML片段，存在多处语法和逻辑错误。以下分步骤分析并修正： --- ### **一、表单属性错误** #### 问题代码： ```html <form action="login.php" method="get" onclick="alert"> ``` #### 问题分析： 1. `onclick="alert"` 缺少函数调用和参数，应改为 `onclick="alert('消息')"` 2. 表单提交方式为 `method="get"`，但包含文件上传控件(`type="file"`)，需改为 `method="post"`（GET无法上传文件） #### 修正代码： ```html <form action="login.php" method="post" onsubmit="return test()"> ``` --- ### **二、JavaScript函数错误** #### 问题代码： ```javascript function test() { var a=document.getElementsById('username').value; var a=document.getElementsById('password').value; alert(a); } ``` #### 问题分析： 1. `getElementsById` 是错误写法，正确为 `getElementById` 2. 变量 `a` 被重复赋值，导致密码覆盖用户名 3. 未阻止表单默认提交行为（需添加 `return false`） #### 修正代码： ```javascript function test() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; alert("用户名：" + username + "\n密码：" + password); return false; // 阻止表单提交 } ``` --- ### **三、表单元素错误** #### 1. 用户名/密码输入框 #### 问题代码： ```html 用户：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> ``` #### 问题分析： - 缺少 `id` 属性，导致 `document.getElementById` 无法定位元素 #### 修正代码： ```html 用户：<input type="text" id="username" name="username"><br> 密码：<input type="password" id="password" name="password"><br> ``` --- #### 2. 复选框(Checkbox) #### 问题代码： ```html 打游戏：<input type="checkbox" name="xq"> 听音乐：<input type="checkbox" name="xq"> 看小说：<input type="checkbox" name="xq"> ``` #### 问题分析： - 同名复选框提交时只会传递最后一个选中值，需改为数组形式 `name="xq[]"` #### 修正代码： ```html 打游戏：<input type="checkbox" name="xq[]" value="游戏"> 听音乐：<input type="checkbox" name="xq[]" value="音乐"> 看小说：<input type="checkbox" name="xq[]" value="小说"> ``` --- #### 3. 文件上传控件 #### 问题代码： ```html <input type="file" name=""> ``` #### 问题分析： - `name` 属性为空，后端无法获取文件数据 #### 修正代码： ```html <input type="file" name="file"> ``` --- #### 4. 提交按钮 #### 问题代码： ```html <input type="button" value="提交" name= "" > ``` #### 问题分析： - `type="button"` 不会触发表单提交，需改为 `type="submit"` #### 修正代码： ```html <input type="submit" value="提交"> ``` --- ### **四、最终修正代码** ```html <form action="login.php" method="post" onsubmit="return test()"> <script> function test() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; alert("用户名：" + username + "\n密码：" + password); return false; // 测试时阻止提交 } </script> 用户：<input type="text" id="username" name="username"><br> 密码：<input type="password" id="password" name="password"><br> 性别： 男：<input type="radio" name="sex" value="male"> 女：<input type="radio" name="sex" value="female"><br> 爱好： 打游戏：<input type="checkbox" name="hobby[]" value="游戏"> 听音乐：<input type="checkbox" name="hobby[]" value="音乐"> 看小说：<input type="checkbox" name="hobby[]" value="小说"><br> 城市： <select name="city"> <option value="成都">成都</option> <option value="广安">广安</option> <option value="北京">北京</option> </select><br> 上传文件：<input type="file" name="file"><br> 留言：<textarea name="message" rows="5" cols="20"></textarea><br> <input type="submit" value="提交"> <button type="button">注册</button> </form> ``` --- ### **五、关键改进总结** 1. **表单属性**：改用 `method="post"` 支持文件上传 2. **脚本修复**：修正 `getElementById` 和变量逻辑 3. **元素命名**：统一 `id` 和 `name`，确保前后端数据传递 4. **控件规范**：复选框使用 `name="hobby[]"` 传递数组，文件上传添加 `name="file"`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值