上传文件时禁止用户手动输入

最新推荐文章于 2022-10-20 17:34:07 发布
原创 最新推荐文章于 2022-10-20 17:34:07 发布 · 194 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文探讨了Web应用程序中文件上传部分的实现，重点介绍了如何防止用户通过直接输入非法文件路径进行文件上传，并详细阐述了Firefox和IE8浏览器对此的限制措施。文章提供了两种解决方案：一是通过脚本事件限制控件输入；二是利用contenteditable属性来有效限制用户在文件上传控件中手动输入内容，从而确保用户所选文件的合法性。

常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件，在上传文件的时候通过点击“浏览”按钮，在弹出的文件选择对话框中选择本地要上传的文件。当然，如果你已经知道要上传的文件的本地路径，也可以复制路径到控件的输入框中（例如要选择的文件的路径特别长）。这就存在一个问题，如果你所复制的文件路径根本不存在，那么上传的时候就无法正确获取到文件，而且在javascript中没有判断该控件所选择的文件是否存在的方法，涉及到浏览器的安全性，大多数时候我们是不能通过javascript来操作客户端本地文件的。

那么如何解决该问题呢？

其实在FireFox和IE8中已经对这个控件进行了相应的限制，如果你在这两种浏览器中查看带有<input type="file"/>标签的页面，会看到根本不允许用户直接输入，而只能通过点击“浏览”按钮来选择文件，这样就可以有效地确保用户所选文件的合法性。但是在IE7和一些低版本的浏览器中仍然是可以输入的，这个时候就需要对这个控件进行一些限制，下面是可以采用的方法：

 

 

2. 使用脚本事件限制控件输入

将<input type="file"/>控件的鼠标右键菜单、按键事件限制住，不让用户有机会输入。

<input type="file" onkeydown="return false" onkeyup="return false" oncontextmenu="return false">

 

3. 使用contenteditable属性

使用该属性可以有效地限制用户在<input type="file"/>控件中手动输入内容，而只能通过文件选择对话框选择文件。

<input type="file" id="file1" contenteditable="false" />

Ubuntu16.04 搭建FTP服务器，设置用户权限为只许上传、禁止下载和删除
HPC&Geophysics攻城狮
11-21 6326
最近导师给了一项任务：在组内某台服务器上创建一个子用户，可以用在windows端用ssh连接到该用户做运算，也允许windows端的用户上传数据，但是禁止向win端下载数据，也禁止删除文件。 开始以为很简单，在Ubuntu系统上分设一个子用户，然后设定该用户的特定文件夹读写权限即可。但是，操作起来发现“图样图森破”，不是那么回事，设定文件夹权限不能实现导师的要求。顿感捉鸡，于是乎寻求优快云的助...
cmd下上传文件到ftp服务器,cmd上传文件到ftp服务器
weixin_31451231的博客
08-06 1305
cmd上传文件到ftp服务器 内容精选换一换在本地主机和Windows云服务器上分别安装QQ.exe等工具进行数据传输。使用远程桌面连接mstsc方式进行数据传输。该方式不支持断点续传，可能存在传输中断的情况，因此不建议上传大文件。文件较大时，建议使用部署FTP服务等方式进行数据互传。登录本地主机。使用快捷键“Win+R”打开“运行”窗口。在“打开”栏，输入“mstsc”，打开远程在本地主机和Wi...
如何禁止电脑自行上传数据－－360禁止限制不必的上传
weixin_34290352的博客
07-09 1350
一台电脑只要接入互联网就难免要下载上传文件（这是一定的，哈哈！），可是有一些软件却在你没有运行或上传的时候依然在上传着文件（这里最厉害就要算迅雷了）。可能有人会说没发现也没什么了不起上传就上传管它呢，可是对有限带宽的用户来说可能就会影响到上网的速度了。其实要看看有没有哪些软件背着你在暗处上传是很容易的，首先你可以先查看你的网络适配器看看有没有在发送数据包（在你没有对发送文件...
关于原生input上传文件，设置了限制，winods还能上传其他文件
asd2437252087的博客
03-03 687
<input @change="onUpFile" type="file" accept=".xlsx, .xls" /> 原生的input现在应该很少用了吧，刚好今天原型图上刚好有一个地方要用原生的input上传，就遇到了windos 在点击上传文件的时候 ，选择打开所有文件，你会发现做了限制的文件格式还是能上传上去。 这时候我想到的change事件。。,就对上传的文件名称去检索，如果不是限制的文件，我们就不让他上传 onUpFile (e) { ...
设置网页中文件上传控件的文本框为不可编辑的办法
daichangfu的专栏
12-13 197
把contentEditable属性设置成false [code="html"] [/code]
vue文本框中禁止输入空格和使用enter键
weixin_43167662的博客
05-27 1678
onkeypress="javascript:if(event.keyCode == 32 || event.keyCode == 13)event.returnValue = false;" 13是enter onkeydown="javascript:if(event.keyCode == 32 || event.keyCode == 13)event.returnValue = false;"
FileUpload 控件禁止手动输入的方法
10-29
对于***的服务器控件，比如，同样可以在控件的属性中添加onkeydown和onpaste事件来实现禁止手动输入的功能。具体的代码示例如下： ```html ;" onpaste="return false" /> ``` 这行代码将在服务器端呈现为一个普通...
FileUpload 控件 禁止手动输入或粘贴的实现代码
09-05
禁止手动输入 在HTML中，可以使用`<input>`标签的`onkeydown`事件来阻止用户键盘输入。`onkeydown`事件会在用户按下键盘键时触发，通过设置`event.returnValue`为`false`，可以阻止该事件的默认行为，即输入字符到...
JS简单实现文件上传实例代码（无需插件）
10-26
- 当文件被选中后，可以通过监听`change`事件来获取用户选择的文件信息，并进行后续处理，如预览文件、上传文件到服务器等。 6. **安全限制** - 浏览器的安全策略可能会限制隐藏的文件输入元素，如Chrome的安全...
禁止input文本框输入实现属性
12-10
今天想总结几个很有用的html标签，开发中经常用到，不熟悉的人可能还真不太清楚，分别是： 复制代码代码如下: readonly、disabled、autocomplete readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值. 复制代码代码如下: <input type=”text” name=”www.xxx” readonly=”readonly” /> disabled表示禁用input元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值 复制代码代码如下: <input type=”t
div实现高度自适应并限制输入字数
front_end_fan
07-28 3350
div模拟textarea实现高度随着内容自适应，并用js限制输入字数一、jQuery版<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>collap
js禁止中文输入 最简洁的【禁止输入中文】
weixin_34348805的博客
12-04 477
方法一：禁止中文输入法 <input type="text" > 方法二：禁止黏贴，禁止拖拽，禁止中文输入法！这种方法是最强的禁止 中文输入<input type="text" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" /> 原文...
上传附件<input type="file">规则
w1158384189的专栏
01-13 602
把file隐藏了然后通过JavaScript调用是不允许的 ，如果调用会出现拒绝访问异常 对于file控件，必须点击它本身才可以完成文件的上传，其他方式都是无效的 不是那么容易控制的，因为出于安全因素在DOM里面对此元素作了非常多的限制（例如不能通过script来改变此元素的value）。
关于el-form组件有时候不能输入问题和el-upload到达上传限制后按钮禁用
feifei0987654321的博客
10-20 1093
关于el-form组件有时候不能输入问题和el-upload到达上传限制后按钮禁用
计算机中事件代表什么意思,在电脑事件中有登录过程advapi是什么意思
weixin_36417344的博客
07-26 1334
这个是网页与数据库接口没有正常连接的错误。也就是申请账号的系统出了问题。原因是多方面的，最主要的是同一时间登陆的人太多，造成系统过载。 不知道哦！我只知道我打开的时候也是这样滴`~ 服务器还没准备好~~~~~~~ 是的我的也是.听说是还没开始.等吧,! 呵, 我也是这个～～哎～刷了１个多小时了～官方给点信息吧 听到你们这么问我实在是.....太高兴拉原来全都和我一样的那哈哈没吓死我我以为就我自己呢...
登录进程为advapi
weixin_30414635的博客
07-31 7620
零、约定 为方便后文叙述，不妨假设：软件学院服务器的本地管理员账户是：administrator。 一、缘起 昨日软件学院网站无法访问，后来发现是权限问题，配置后恢复正常。然解决途中，偶尔看到事件查看器中，有本地管理员administrator登陆系统的记录；但是经过询问，发现知道管理员密码的维护人员都没有在该时间登陆服务器。故因而生疑。 二、情况描述1）事件查看器中记...
前端js如何指定上传文件的编码
最新发布
08-20
<think>我们正在处理一个关于前端文件上传时设置编码格式的问题。根据用户的问题，他想知道如何在使用JavaScript上传文件时指定文件的编码格式。 首先，我们需要理解文件上传的编码设置。在HTTP请求中，文件上传通常使用`multipart/form-data`编码类型，这是由表单的`enctype`属性指定的。当使用JavaScript的`FormData`对象时，浏览器会自动设置正确的`Content-Type`头，包括边界（boundary）信息。 但是，用户可能指的是在文件上传时对文件内容进行特定的编码（如Base64、UTF-8等）。通常，文件以二进制形式上传，并不需要特别设置编码，因为文件本身就是二进制的。不过，如果用户需要将文件内容以文本形式上传，并指定文本的编码，那么我们可以通过读取文件内容并设置编码，然后将其作为文本上传。 然而，根据标准的上传方式，我们通常不会改变文件的原始编码。如果用户希望将文件以文本形式上传并指定编码，那么我们可以使用`FileReader`读取文件内容，然后以指定的编码（如UTF-8）获取文本，再将其作为文本字段上传。 但是，请注意，这种方式上传的是文本内容，而不是原始文件。如果用户需要上传原始文件，那么直接使用`FormData`对象添加文件，浏览器会以二进制流的形式发送文件，此时不需要设置文件内容的编码。 另外，用户可能指的是设置整个请求的编码。在AJAX请求中，我们可以设置请求头的`Content-Type`，但对于`multipart/form-data`，浏览器会自动设置正确的`Content-Type`，包括边界，所以我们不应该手动设置`Content-Type`头，否则会破坏边界。 参考引用： 引用[2]提到：`contentType: false`，这是在使用jQuery的ajax上传文件时的设置，表示禁止jQuery设置`Content-Type`头，让浏览器自动设置，因为我们需要`multipart/form-data`格式，并且包含边界。 引用[3]提到了三种编码格式：`application/x-www-form-urlencoded`、`multipart/form-data`和`application/json`。其中，文件上传使用`multipart/form-data`。 因此，针对用户的问题，我们分两种情况讨论： 1. 上传原始文件（二进制）： 使用`FormData`对象，并设置AJAX请求的`contentType`为`false`（如果使用jQuery）或者不设置`Content-Type`头（使用原生JavaScript），让浏览器自动设置。 2. 将文件内容作为文本上传，并指定编码： 使用`FileReader`读取文件内容，读取时可以选择编码（如UTF-8）。读取完成后，将文本内容作为普通文本字段发送，此时可以设置请求体的编码（如设置`Content-Type`为`text/plain; charset=UTF-8`），但这种方式上传的是文本而不是文件。 根据用户的问题，他可能更关心的是第一种情况，即上传原始文件。在第一种情况下，我们不需要设置文件内容的编码，因为文件是作为二进制流上传的。 但是，如果用户需要在上传前对文件内容进行编码转换（例如，将文本文件从GBK转成UTF-8），那么这需要在读取文件后进行转码，然后再将转码后的内容作为新的Blob对象添加到FormData中。这涉及到文件内容的转码处理。 下面我们分别给出示例： 情况一：上传原始文件（二进制） ```javascript // 使用FormData上传文件 var formData = new FormData(); formData.append('file', fileInputElement.files[0]); // 假设fileInputElement是一个文件输入元素 // 使用原生XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload_url'); // 不要设置Content-Type，浏览器会自动设置 xhr.send(formData); // 使用jQuery $.ajax({ url: 'upload_url', type: 'POST', data: formData, processData: false, // 告诉jQuery不要处理数据 contentType: false // 告诉jQuery不要设置Content-Type }); ``` 情况二：上传文本内容并指定编码 ```javascript // 读取文件内容并指定编码 var reader = new FileReader(); reader.onload = function(e) { // e.target.result 是文件内容，以字符串形式（使用UTF-8编码） var content = e.target.result; // 现在我们可以将内容作为文本发送 var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload_url'); xhr.setRequestHeader('Content-Type', 'text/plain; charset=UTF-8'); // 设置文本内容的编码 xhr.send(content); }; // 以文本形式读取，默认编码是UTF-8，也可以使用readAsText(file, encoding)指定编码 reader.readAsText(fileInputElement.files[0], 'UTF-8'); ``` 情况三：如果用户需要上传经过转码的文件（例如，将文件内容从GBK转成UTF-8），那么我们需要读取原始文件内容，然后进行转码，再生成一个新的Blob对象。 但是，由于JavaScript的FileReader的readAsText方法默认使用UTF-8，并且可以指定编码读取，但写入时只能以Blob形式，而Blob默认是UTF-8。如果我们读取一个GBK编码的文件，并以UTF-8编码上传，那么我们可以： ```javascript var reader = new FileReader(); reader.onload = function(e) { // 假设我们读取的是GBK编码的文件，但FileReader不支持GBK，所以这里需要借助第三方库进行转码 // 例如，使用TextDecoder和TextEncoder（但注意，浏览器对非UTF-8编码支持有限） // 或者使用第三方库如iconv-lite（在浏览器中需要编译成JavaScript） // 由于在浏览器中直接处理GBK转UTF-8比较复杂，这里不展开，但思路是：读取文件为ArrayBuffer，然后使用转码库转换，再生成UTF-8的Blob // 这里仅提供思路，因为通常不建议在浏览器端做文件编码转换，尤其是非UTF-8编码，因为支持有限。 // 转换后的内容 var utf8Content = ...; // 转换后的字符串 // 创建Blob对象，指定类型和编码 var blob = new Blob([utf8Content], {type: 'text/plain; charset=UTF-8'}); // 使用FormData上传 var formData = new FormData(); formData.append('file', blob, 'filename.txt'); // 可以指定文件名 var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload_url'); xhr.send(formData); }; // 读取为ArrayBuffer，因为我们要自己处理编码 reader.readAsArrayBuffer(fileInputElement.files[0]); ``` 但是，情况三比较复杂，且需要额外的库支持。在大多数情况下，如果用户只是上传文件，我们不需要关心文件内容的编码，因为文件是二进制上传的。只有在需要处理文件内容时，才需要编码。 因此，回到用户问题：“JavaScript前端上传文件时如何设置文件编码格式”。通常，我们不需要设置文件编码格式，因为文件是作为二进制上传的。如果用户需要在上传前对文件内容进行编码转换，那么需要先读取文件，转换编码，然后重新生成Blob再上传。 总结： 1. 对于原始文件上传，使用FormData，不需要设置编码。 2. 如果要将文件内容作为文本上传，使用FileReader读取为文本（可指定编码），然后作为文本发送，并设置请求头的Content-Type指定字符集。 3. 如果需要转换文件编码，则读取文件内容，转换编码，然后生成新的Blob上传。 由于用户的问题比较简短，我们可能需要进一步明确需求。但根据常见情况，我们给出上述解答。 相关问题： 1. 使用FormData上传文件时，如何设置其他表单字段？ 2. 如何在上传文件之前验证文件类型和大小？ 3. 如何处理大文件的上传（例如分片上传）？ 4. 在浏览器中如何实现文件编码的转换？</think>### 前端文件上传时设置编码格式的方法 在 JavaScript 前端文件上传中，**文件编码格式主要通过设置 HTTP 请求头的 `Content-Type` 来实现**，具体操作取决于使用的上传方式： #### 1. 使用原生 FormData（推荐） ```javascript const fileInput = document.querySelector('input[type="file"]'); const formData = new FormData(); formData.append('file', fileInput.files[0], 'filename.txt'); // 第三个参数为文件名 // 创建请求 const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); // 关键设置：不手动设置 Content-Type，浏览器自动添加 multipart/form-data 和边界 xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // ❌ 错误！不要手动设置 xhr.send(formData); // ✅ 正确：浏览器自动处理编码 ``` **特点**： - 浏览器自动生成 `Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxxx`[^2] - 支持二进制文件传输（如图片、视频） - 无需手动指定文件编码 #### 2. 自定义文本编码（如 UTF-8） 若需上传文本文件并指定编码： ```javascript const reader = new FileReader(); reader.onload = function(e) { const text = e.target.result; // 文件内容（默认 UTF-8） // 创建自定义请求体 const blob = new Blob([text], { type: 'text/plain; charset=UTF-8' }); const formData = new FormData(); formData.append('file', blob, 'textfile.txt'); // 发送请求（不设置 Content-Type） fetch('/upload', { method: 'POST', body: formData }); }; reader.readAsText(fileInput.files[0], 'UTF-8'); // 显式指定读取编码 ``` #### 3. 通过 fetch/axios 的配置 ```javascript // fetch fetch('/upload', { method: 'POST', body: formData, // FormData 对象 headers: { // 不要设置 Content-Type！浏览器会自动处理[^2] } }); // axios axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' // ❌ 错误！会导致边界丢失 } }); ``` #### 关键注意事项： 1. **禁止手动设置 Content-Type** 使用 `FormData` 时，浏览器会自动添加 `multipart/form-data` 和边界标识（boundary），手动设置会导致服务器无法解析文件[^2] 2. **文本编码指定位置** - 文件读取阶段：`FileReader.readAsText(file, 'UTF-8')` - Blob 生成阶段：`new Blob([content], { type: 'text/plain;charset=GBK' })` 3. **二进制文件无需编码** 图片、视频等二进制文件直接通过 `FormData` 传输，无需指定编码（原始字节流） --- ### 相关技术解析 | 场景 | 推荐方法 | 编码设置位置 | |--------------------|----------------------------|----------------------------| | 二进制文件上传 | `FormData`（不设 Content-Type） | 无需指定 | | 文本文件指定编码 | `FileReader` + `Blob` | `readAsText()` 或 Blob 类型 | | JSON 数据混合上传 | 多部分 FormData | 各部分单独设置 Content-Type | --- ### 相关问题 1. 如何限制前端上传文件的类型和大小？ 2. 为什么手动设置 `Content-Type: multipart/form-data` 会导致文件上传失败？ 3. 如何实现大文件分片上传和断点续传？ 4. 前端如何处理非 UTF-8 编码的文本文件（如 GBK）？ [^1]: 前端本地文件操作与上传，通过 `file.type` 和 `file.size` 验证文件类型和大小 [^2]: 使用 `FormData` 上传文件时需设置 `contentType: false` 防止破坏编码结构 [^3]: HTTP 请求的三种编码格式：`application/x-www-form-urlencoded`、`multipart/form-data` 和 `application/json`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值