最简单的html文件上传示例

最新推荐文章于 2024-02-29 20:09:51 发布
最新推荐文章于 2024-02-29 20:09:51 发布
阅读量2.1w 收藏 8
点赞数 10
分类专栏： Java(Flex、常用框架、等等) JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianyi7659/article/details/8708893
版权

最简单的上传方式就是用form表单、input file 、input submit构成。服务端可以采用任意的fileupload控件都可以。这里用的是fileUpServlet。

 

<form name="uploadForm" method="POST"
        enctype="multipart/form-data"
        action="/ProcessServer/FileOperate/fileUpServlet">
        Upload File1:<input type="file" name="file1" size="30"/>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">
     </form>

</body>

战神
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
文件上传的html页面
09-11
只是一个简单的文件上传的html页面。 输入上传人名，点击浏览选择上传文件。 点击提交进行文件的上传。
完美实现 IE10 下利用HTML5实现文件上传（图片上传）功能
liwei3gjob的专栏
05-19 1万+
近期因为工作需要研究了纯HTML5实现文件上传，并在IE10下测试完美通过，本文由笔者基于互联网源代码思路整理和改进，改进版属原创，源代码供各位朋友下载参考，本文部分文字来自互联网，版权归原作者所有。       文件上传对于Web开发者来说非常重要的，不同的语言实现的方法也不一样,从笔者几年从事的Web开发工作看，最简单的就是使用PHP实现文件上传，我们只需要简单配置PHP文件上传信息后，通过
uniapp开发H5，实现H5上传文件（PDF），并可以预览下载删除
最新发布
JPQLGZPW的博客
02-29 727
总共需要用到四个API，
HTML文件上传示例
07-18
如何实现通过css3 + HTML5 实现页面标签切换。。。。。。。。。。。。。。。。。。
实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【思路篇】...
weixin_34415923的博客
01-29 286
温馨提示：这里除了一些幼稚的小组件啥也没有温馨提示-续：这是一个新的系列，写一些实际开发中遇到的一些常用的功能，想法笨拙，代码乱套 写在前面 图片上传，作为web端一个常用的功能，在不同的项目中有不同的需求，在这里实现一个比价基本的上传图片插件，主要能实现图片的浏览，剪裁，上传这三个功能，同时也是为了让自己对图片／文件上传和HTML5中名...
文件上传器示例
02-22
首映MERN Stack 关于 足够简单，可以建立，足够复杂，可以带您一路走。 该堆栈使您可以使用绝对开发人员来运行。 用于HMR的Webpack开发服务器与Express API服务器集成。 Mongoose和MongoDB（适用于您的数据库），在路由级别进行代码拆分以实现小捆绑包大小，优雅的绒毛，具有智能默认设置的一致性，以及来自MERN堆栈的所有其他优点（使用最新和最好的）。 请参阅下面的完整功能列表 特征 React路由器客户端路由 每条路线的延迟加载/动态导入 CSS / SASS / LESS Babel 7 + Webpack 4 Webpack开发服务器+ Express API服务器 适用于CSS / SASS / LESS的HMR 实时重新加载HTML / JS / JSX ESLint Stylelint PostCSS +自动前缀 入门 运行npm i
html/javascript实现简单的上传
JSON_J的博客
11-07 8629
简单的原生上传实现
前端笔记之文件上传组件
qq_41910359的博客
05-30 293
自己封装的一个贼拉丑文件上传组件1.实现思路2.后端代码 哈哈哈哈哈哈，真的好丑。。。。 1.实现思路 首先是一个文件上传的区域，本身就是大的label元素，绑定了一个隐藏的input type=file，然后就往后传文件，监听文件变化后就将这个label隐藏，切换出显示进度条的页面，等进度条完成后再切换预览页面。 代码很粗糙，仅限于写个demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
Web前端：简洁美观的HTML图片上传UI框架
小小飞行家
03-23 7674
LXXUploadPic-图片上传UI框架 LXXUploadPic是一个用户上传图片的Web前端框架，在引入头文件的前提下，开发者只需要在HTML源码中添加一行标记就能够在页面上生成美观的UI。该框架基于JQuery，使用了HTML、CSS、Javascript完成。
目前主流的几款文件上传控件，以及优缺点
weixin_45525177的博客
11-28 1922
支持不同平台（Windows, Linux, Mac, Android, iOS）下，主流浏览器（IE7+, Chrome, Firefox, Safari, 其他）的上传工作，当然在Html5标准下，还支持文件的断点续传功能，有效解决大文件的Web上传问题！此前Stream上传插件是套用网易的上传UI，虽然满足了大多数人的需要，但是在某些情况下，UI风格不符合，导致放弃。3、允许一次上传多个文件，但会有一个上传队列，队列里文件的上传是逐个进行的，服务器端接收文件时跟普通的表单上传文件是一样的;
html 4选择文件并上传,GitHub - jiangzy123/web-uploader: 轻量级 web (html5 + html4) 文件上传组件，纯js，支持上传进度显示，支持秒传+分片上...
weixin_39625782的博客
06-04 128
web-uploaderjs (html5 + html4) 文件上传管理器，支持上传进度显示，支持秒传+分片上传+断点续传，支持图片预览+缩放，支持 IE6+、Firefox、Chrome等。特点：轻量级，不依赖任何JS库，核心代码(Q.Uploader.js)仅约700行，min版本加起来不到12KB纯JS代码，无需Flash，无需更改后台代码即可实现带进度条(IE10+、其它标准浏览器)的上...
JQuery实现ajax上传文件示例源码20121029
02-22
JQuery实现ajax上传文件示例源码 源码描述： url用来指定后台处理的程序，fileElementId指的是文件选择框的ID，dataType用来指定返回的数据格式，支持xml、script、json和html。 返回的json的格式最简单：{error:'errormsg',msg:'successmsg'}，看后台代码就明白了。success为上传成功后执行的function， 其中的data参数就是服务器端返回的参数。error当然就是上传失败后执行的function,其中参数e为javascript捕获的错误。status参数一般用不到， 上传成功是值为"success",失败时一般为"timeout"。
java 编写文件上传类简单易用
12-28
用 Java 编写的、协议和平台都独立的服务器端组件，使用请求/响应的模式，提供了一个基于 Java 的服务器解决方案。本文将从文件传输的基本原理入手，分析如何用 java进行文件的上传，并提出解决方案。 一、基本原理 通过 HTML 上载文件的基本流程如下图所示。浏览器端提供了供用户选择提交内容的界面（通常是一个表单），在用户提交请求后，将文件数据和其他表单信息编码并上传至服务器端，服务器端（通常是一个 cgi 程序）将上传的内容进行解 码了，提取出 HTML 表单中的信息，将文件数据存入磁盘或数据库。 -------------------------------------------------------------------------------- 回页首 二、各过程详解 A）填写表单并提交 通过表单提交数据的方法有两种，一种是 GET 方法，另一种是 POST 方法，前者通常用于提交少量的数据，而在上传文件或大量数据时，应该选用 POST 方法。在 HTML 代码中，在 <form> 标签中添加以下代码可以页面上显示一个选择文件的控件。 <input type="file" name="file01"> 在页面中显示如下（可能随浏览器不同而不同） 可以直接在文本框中输入文件名，也可以点击按钮后弹出供用户选择文件的对话框。 B）浏览器编码 在向服务器端提交请求时，浏览器需要将大量的数据一同提交给 Server 端， 而提交前，浏览器需要按照 Server 端可以识别的方式进行编码，对于普通的表单数据，这种编码方式很简单，编码后的结果通常是 field1=value2&field2=value2&… 的形式，如 name=aaaa&Submit=Submit。这种编码的具体规则可以在 rfc2231 里查到， 通常使用的表单也是采用这种方式编码的，Servlet 的 API 提供了对这种 编码方式解码的支持，只需要调用 ServletRequest 类中的方法就可以得到 用户表单中的字段和数据。 这种编码方式（ application/x-www-form-urlencoded ）虽然简单，但对于传输大块的二进制数据显得力不从心，对于传输这类数据，浏览器采用了另一种编码方式，即 "multipart/form-data" 的编码方式，采用这种方式，浏览器可以很容易的表单内的数据和文件一起。这种编码方式先定义好一个不可能在数据中出现的字符串作为分界符，然后用它将各个数据段分开，而对于每个数据段都对应着 HTML 页面表单中的一个 Input 区，包括一个 content-disposition 属性，说明了这个数据段的一些信息，如果这个数据段的内容是一个文件，还会有 Content-Type 属性，然后就是数据本身。 这里，我们可以编写一个简单的 Servlet 来看到浏览器到底是怎样编码的。 实现流程： 重载 HttpServlet 中的 doPost 方法 调用 request.getContentLength() 得到 Content-Length ，并定义一个与 Content-Length 大小相等的字节数组 buffer 。 从HttpServletRequest 的实例 request 中得到一个 InputStream, 并把它读入 buffer 中。 使用 FileOutputStream 将 buffer 写入指定文件。 代码清单 // ReceiveServlet.java import java.io.*; import javax.servlet.*; import javax.servlet.http.*; //示例程序：记录下Form提交上来的数据，并存储到Log文件中 public class ReceiveServlet extends HttpServlet { public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException { //1 int len = request.getContentLength(); byte buffer[] = new byte[len]; //2 InputStream in = request.getInputStream(); int total = 0; int once = 0;
纯js选择图片裁剪上传服务端简单示例
06-01
最简单纯js+html5选择图片裁剪并上传服务端简单示例，参数控制裁剪区域大小，裁剪区域可移动，支持裁剪后预览，提供服务端源码PHP文件接收上传示例。
Uguu:简单的轻量级临时文件托管
05-12
Uguu是一个简单的轻量级临时文件上传和共享平台，其中X倍的时间后文件将被删除。特征一键上传，无需注册最小的现代Web界面支持拖放上载具有多种响应选择的API JSON格式HTML 文本CSV 支持和其他屏幕截图工具演示版请...
easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式）
热门推荐
jianyi7659的专栏
08-03 7万+
所谓为了支持某属性的子属性，主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性，而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持一级属性字段（属性的属性字段属于二级字段）。 对于这个问题的解决方案有两种方式 1、就是更改esayui源文件，是其支持field.sonfield的形式。 javascript语法为我们提供了
Java 三大框架——SSH框架应用简介
jianyi7659的专栏
07-01 3万+
JAVA三大框架用来做WEN应用。struts主要负责表示层的显示 spring利用它的IOC和AOP来处理控制业务（负责对数据库的操作） hibernate主要是数据的持久化到数据库  在用jsp的servlet做网页开发的时候有个web.xml的映射文件，里面有个mapping的标签就是用来做文件映射的。 当你在浏览器上输入URL地址的时候，文件就会根据你写的名称对应到
高斯克吕格与地理坐标相互转换算法（JS版本）
jianyi7659的专栏
05-19 1万+
最近一段时间在研究高斯克吕格与地理坐标的互换算法，刚才的时候写了一个只能用于标准分带的算法，发现并不符合实际的一些地方坐标系的互换操作。经过研究最终写出了即可以应用于标准分带的和地方性的高斯克吕格与地理坐标系的算法，现在贴出来供大家参考，也希望大家批评指正。 代码如下： /*  * 投影变换算法。用于地方坐标系  */ SuperMap.Web.Tool.ProjectionTransf
html上传文件到python
06-03
要在 HTML 页面中上传文件并将其发送到 Python 服务器，可以使用 HTML `<form>` 元素和 Python Flask 框架的 `request` 模块。以下是一个简单的示例： HTML 页面： ```html <!DOCTYPE html> <html> <head> <title>文件上传</title> </head> <body> <form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="上传"> </form> </body> </html> ``` Python 服务器： ```python from flask import Flask, request app = Flask(__name__) @app.route('/upload', methods=['POST']) def upload_file(): file = request.files['file'] file.save(file.filename) return '文件上传成功！' if __name__ == '__main__': app.run(debug=True) ``` 在上面的示例中，HTML 页面中的 `<form>` 元素将文件上传到 `/upload` 路径。在 Python 服务器中，`request.files['file']` 获取上传的文件，然后使用 `save()` 方法保存到服务器本地文件系统中。最后，返回一个简单的成功消息。 当然，这只是一个简单的示例，实际上你需要考虑到文件的大小限制、文件类型过滤、安全性等问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值