使用<input type="file">实现文件上传

最新推荐文章于 2024-05-23 15:38:49 发布
最新推荐文章于 2024-05-23 15:38:49 发布
阅读量4.6k 收藏 1
点赞数 1
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011194363/article/details/48229545
版权

实现文件上传有很多方法，还有一些现成的插件可以使用，笔者在学习途中，并没有用过，读者可以百度一下。

笔者并没有实现文件过滤的功能，即限制文件的上传类型。

笔者使用了struts框架，需要在struts.xml文件的<struts></struts>标签内添加：

<!-- 设置上传文件的最大值 -->
<constant name="struts.multipart.maxSize" value="102400000"/>

struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
  <constant name="struts.devMode" value="true"/>
  <constant name="struts.multipart.maxSize" value="102400000"/>
  <include file="struts-default.xml"></include>
  <package name="
最低0.47元/天 解锁文章
嘻嘻嘻-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input type=file 获取选择文件名称、路径方法及input上传按钮美化
Sun_blog
12-17 1万+
input type=file 获取选中文件名称、路径方法及input上传按钮美化
上传文件，通过input控制文件格式
weixin_39724194的博客
05-12 343
今天上传文件时，同事说可以限制文件上传的格式，他说时通过type来控制，可是试了下发现并不行。后来查了是通过accept属性来控制。 <input type="file" name="video" id="video" class="input-file"> 这样会显示所有的文件。 添加一个accept可以显示自己想要的文件类型： <input type="file" accept=".jpg,.gif,.png,.jpeg" name="imageUrlFile" id=
前端手写文件上传；使用input实现文件拖动上传
最新发布
i_am_a_div的博客
05-23 306
前端手写文件上传；使用input实现文件拖动上传
javawev表单上传文件（图片） ＜input type=“file“ name=“uploadFile“ /＞
热心上单小张的博客
10-30 346
jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> &l
input type=‘file‘ 前端实现文件上传
weixin_41141811的博客
12-31 850
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件上传</title> <script src="jquery/jquery-1.11.2.js"></script> </head> <body> <input type="file" name="" id="upfile" value..
HTML input type=file文件 选择表单元素 图片上传等等
cc的博客
12-14 6821
一、- input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下： <input type=file> 但是，为了习惯，我们多写成： <input type="file"> 在HTML5出现之前(XHTML)，我们的闭合规则则有些出入： <input type="file"...
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
vue中使用input[type="file"]实现文件上传功能
10-18
主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
HTML input type=file文件选择表单元素.docx
11-22
在使用 input type=file 文件选择表单元素时，需要注意 enctype 属性的作用。enctype 属性规定了在发送到服务器之前应当如何对表单数据进行编码，默认的编码是 application/x-www-form-urlencoded。但是，对于文件...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
在HTML中，文件上传功能通常使用`<input type="file">`元素来实现。这个元素在不同的浏览器下，默认样式会有差异，通常是简单的文本输入框样式，可能与网站的整体设计风格不匹配。为了满足用户界面的需求和提升用户...
HTML中文件上传时使用的<input type="file">元素的样式自定义
09-28
首先，要创建一个自定义的文件上传按钮，可以使用`<span>`元素包裹`<input type="file">`，并添加一个用于显示文本的额外`<span>`，如“上传”。这样，HTML结构如下： ```html <span> <span>上传</span> <input ...
html file文本框,HTML元素 - input type=file控件上传文件的问题
weixin_39589693的博客
06-04 422
今同事问了个关于触发inputtype=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候都会用到这个控件。简单实现：像如下代码片段，我们轻松实现了这个上传文件的页面制作enctype="multipart/form...
vue3使用原生input[type=‘file‘]上传文件
LOG的博客
05-28 8233
html页面 使用原生input[type=‘file’]，并绑定@change事件，当侦测到该元素选择的文件发生变化时触发上传文件事件 <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required @change="changeFile"> 常用属性 accept（限制可用文件类型）。 比如限制只能上传jpg或pngaccept="image/png, image/
input[type=file] 获取上传文件的内容
极客神殿
11-24 5万+
上代码： &amp;lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;fileUpload&quot;&amp;gt; jquery： $(&quot;#fileUpload&quot;).change(function () { console.log($(&quot;#fileUpload&quot;)
input的type=file上传文件accept中限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
盏茶作酒的博客
08-12 2万+
（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。） 1、允许上传文件数量 1. 允许选择多个文件：<input type="file" multiple> 2. 只允许上传一个文件：<input type="file" single> 2、上传指定的文件格式 如指定默认格式为gif、png： <input type="file" accept="image/gif,image/png" /> 1 如果不限制上传图片的格式，只限...
前端JS 使用input完成文件上传操作，并对文件进行类型转换
Dominic_W的博客
11-18 2689
如上图所示，这是input type="file"在页面上渲染出来的原生的样式，但是在项目中实际使用时我们一般都会设置一个自定义的样式，毕竟原生的样式通常和我们的页面风格不统一。直接在input标签上写CSS代码不起作用，在项目开发中通常使用隐藏input标签，然后在input标签上层覆盖一个自定义的标签，然后我们对这个自定义的标签设计样式。-- 设置 opacity: 0;
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
AC_Surprise的博客
09-02 1万+
介绍 input 全部类型 input 框的类型到底有多少种呢，零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text
关于input type=“file”的及其files对象的深层探究
热门推荐
lianzhang861的博客
05-11 11万+
我们都知道，html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 但一般的做法只是简单的在表单中操作，我来研究一下深层东西 想要了解它，就要知道它的内置对象，files 页面上写一个input，然后选俩个图片，打印这个input对象 $("input[name='file1']").change( function(e){ console.log...
input = file 实现上传文件
lwf的博客
07-02 9万+
使用input = file实现文件上传功能， 如果点击提交按钮，提交表单并上传选中的文件： <FormItem label="上传简历"> <div className="section-pushInChannel-fileInput"> <input id="file" onChange={this.handleFileChange} t...
<!DOCTYPE html><html><head> <title>文件上传页面</title></head><body> <h1>文件上传</h1> <form action="/upload" method="post" enctype="multipart/form-data"> <label for="file">选择文件：</label> <input type="file" id="file" name="file"><br><br> <input type="submit" value="上传"> </form></body></html>这段代码怎么改才能上传图片
06-08
<input type="file" id="file" name="file" accept="image/*"><br><br> <input type="submit" value="上传"> </form> </body> </html> ``` 这样用户在上传文件时只能选择图片文件，其他类型的文件将被过滤掉。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值