HTML5 ( 借助http请求发送formdata对象,从而上传文件 ) XMLHttpRequest, FormData

最新推荐文章于 2023-05-07 16:20:25 发布
最新推荐文章于 2023-05-07 16:20:25 发布
阅读量235 收藏
点赞数
文章标签： xhtml javascript ViewUI 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS文件上传</title>
    <script type="text/javascript" src="../js/jQuery.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        #img {
            display: block;
            width: 9.98rem;
            height: 6rem;
            border: .01rem solid black;
        }
        
        #file {
            display: block;
            margin: -6rem 0 0 0;
            opacity: 0;
            width: 10rem;
            height: 6rem;
        }
        
        #submit {
            display: block;
            width: 5rem;
            height: 2rem;
            margin: .5rem 2.5rem;
            font-size: .45rem;
            text-align: center;
            line-height: 2rem;
        }
    </style>
</head>
<body>
    <img id="img" src="" />
    <input id="file" type="file" />
    <input id="submit" type="button" value="提交文件" />
</body>
</html>
<script type="text/javascript">
    // rem布局
    $('html').css('font-size', $(window).width() / 10);
    // 实例化formData对象
    var formData = new FormData();
    // 当选取文件时
    $('#file').on("change", function() {
        var fileList = $("#file")[0].files;
        var src = URL.createObjectURL(fileList[0]);
        $('#img').attr('src', src);
        formData.append("file", fileList[0]);
    });
    // 点击提交上传时
    $("#submit").on('click', function(){
        /**
         * http 请求对象 XMLHttpRequest
         * XMLHttpRequest.open(请求方式, 请求地址, 是否异步 )
         * XMLHttpRequest.onload: 请求响应时调用的方法
         * e.target.responseText: 服务器响应的文本内容 
         */
        var httpRequest = new XMLHttpRequest();
        httpRequest.open("POST", "http://192.168.0.105/WebTest/FileUploadServlet", true);
        httpRequest.onload = function(e){
            console.log(e.target.responseText);
        }
        httpRequest.send(formData);
    });
</script>

 

weixin_34124939
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iOS-应用双层代码签名
我的专栏
11-03 308
什么是数字签名 数字签名介绍 通信双方A，B，A拥有RSA（非对称加密）的私钥，B拥有RSA的公钥，现在A要发送一个文件给B，但是这个文件又比较大，RSA一般适用于小文件的加密，所以直接采用RSA不太合适，所以A通过Hash函数，生成文件的摘要（digest）（进行签名），然后使用私钥对这个文件摘要加密，然后将这个加密后的摘要文件和要发送的文件一起发送给B，B接受到文件后，通过公钥对摘要文件进行解密，然后B对发送来的文件通过Hash 函数，生成摘要，用这个摘要和解密好的摘要文件内容进行对比，如果相同，就说明
5.http的请求方式
郑学炜的技术博客
03-13 412
http请求方式如何发送http有很多种方式，但是最常用的就是POST和GET。其他的有些出于安全性的考虑一般都不建议使用。那么POST与GET有什么区别呢？1 使用目标不同：POST与GET都用于获取信息，但是GET方式仅仅是查询，并不对服务器上的内容产生任何作用结果；每次GET的内容都是相同的。POST则常用于发送一定的内容进行某些修改操作。2 大小不同：由于不同的浏览器对URL的长度大小有一...
http可以发送html 不能发送文件,HTML5 借助http请求发送formdata对象,从而上传文件 XMLHttpRequest, FormData...
weixin_39600823的博客
06-17 67
JS文件上传* {margin: 0;padding: 0;}#img {display: block;width: 9.98rem;height: 6rem;border: .01rem solid black;}#file {display: block;margin: -6rem 0 0 0;opacity: 0;width: 10rem;height: 6rem;}#submit {dis...
XMLHttpRequest FormData
weixin_33958366的博客
06-04 589
What is FormData MDN XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs ...
formdata和xmlhttprequest
u010216786的博客
11-15 3118
ajax+formdata
HTML5 FormData 方法介绍以及实现文件上传示例
12-14
文件上传的关键在于，`FormData`对象能够处理二进制数据，这是传统HTTP POST请求所不能做到的。下面是一个包含文件上传的表单示例： ```html <p>name:<input type="text" name="name" /></p> <p>gender:...
jQuery Ajax使用FormData对象上传文件的方法
11-23
在现代Web开发中，文件上传是一项常见的功能，jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集，然后利用XMLHttpRequest对象发送这些数据，而...
PHP使用HTML5 FormData对象提交表单操作示例
01-20
此外，FormData对象还支持异步文件上传、进度跟踪以及取消请求等功能，使得处理复杂的表单提交场景变得更加容易。在实际开发中，结合PHP和HTML5的FormData对象，可以构建出用户体验更好、更安全的表单提交和文件上传...
深入理解HTML的FormData对象
09-28
使用XMLHttpRequest或Fetch API，可以将FormData对象发送到服务器。以下是一个使用Fetch的例子： ```javascript fetch('https://example.com/upload', { method: 'POST', body: formData }); ``` ### 5. 浏览器...
使用FormData实现上传多个文件
10-17
`FormData`对象是HTML5引入的一个非常实用的API，它允许我们方便地处理表单数据，尤其是在上传文件时。本篇文章将详细介绍如何使用`FormData`来实现上传多个文件的功能。 首先，我们要明白`FormData`的基本用法。`...
用xml存储ajax数据,用XMLHttpRequest2的formdata来发送ajax
weixin_30788829的博客
08-05 217
用XMLHttpRequest2的formdata来发送ajax今天自己简单实现了一下ajax和jsonp的封装，心血来潮想尝试一下XMLHttpRequest2的新特性，其实xhr也不算很新，浏览器兼容问题已经不多了(查看caniuse)，只是平时很少去自己封装。加上最近想把h5的新特性都写写一下看看。初次学习，多多包涵。搭建服务器为什么要搭建服务器呢，因为ajax请求受同源策略限制，在本地搭建...
XMLHttpRequest，FormData对象和Promise封装
weixin_43487782的博客
10-07 1277
之前在项目中看到过一段上传文件的代码，其中有这样一句： const form = new FormData(); 当时不知道这个FormData()是个什么东西，好像也没有这样的构造函数，但是用的时候都是复制粘贴的，代码也能正常运行，所以也就没有多想。 今天无意中查了一下XMLHttpRequest，原来这玩意还有Level 1标准和Level 2标准，我知道的那些都是Level 1，而FormData是Level 2里面的新增特性，下面就来系统总结一下。 什么是 XMLHttpRequest 对象 以下
http使用formData方式传输文件请求
weixin_30612769的博客
05-14 1725
转载请注明出处： 　　项目中有遇到http使用formData请求传输文件，在此记录一下 1.依赖jar包： <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId&gt...
HTML5 FormData 方法介绍
2301_76965813的博客
05-07 1011
2008年 2 月，XMLHttpRequest Level 2 草案提出来了，相对于上一代，它有一些新的特性，其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。看起来跟append() 方法有点类似，这两者的区别就是，当指定的 key 值存在时，append()方法是将新增的添加的所以的键值对最后，而set()方法将会覆盖前面的设置的键值对。如果设置的key值不存在，那么两者的效果是一样的。
FormData实现文件上传
Mr.小强的博客
10-05 2825
FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。从而实现文件的上传 一、FormData对象的构造 1、创建一个FormData空对象,然后通过append()方法添加数据 FormData formData = new FormData(); formData.append("username",username...
HTML5表单的请求学习与整体运用
Ann1223的博客
07-27 255
Web学习Day7——HTML5（5） HTTP：应用层的协议 响应的状态码http status200 404 500 请求方式method：get post GET：显示的 大小有限制（小） 浏览器的地址栏 超链接 表单 Post：隐士的 大小有限制（大） 表单 一次请求 一次响应 Enctype: Text/plain application/x-www-form-urlencoded（默认） Multipart/from-data (大数据)——post 请求报文： 请求行：mothod url
HTTP请求中的传参方式form data、 request payload、query string parameters。
眉目成书
10-24 6529
Content-Type: application/x-www-form-urlencoded(常规的HTML页面上的form的Content-type默认值)，此方式是以form-data形式提交，即以&amp;amp;符号拼接。 xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('...
XMLHttpRequest Level2新特性（设置HTTP请求（超时）时限、演示FormData对象的基本使用管理表单数据、使用formdata快速获取表单中的数据、利用XML上传文件）
weixin_52065872的博客
07-07 1197
XMLHttpRequest Level2新特性（设置HTTP请求（超时）时限、演示FormData对象的基本使用管理表单数据、使用formdata快速获取表单中的数据、利用XML上传文件）
HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件
weixin_44867717的博客
12-08 1197
HTML5游戏引擎（十二）-发送http请求——GET 方法 & POST 方法 & 发送请求 & 发送带参数的请求 & 加载位图文件 发送http请求 Egret 中封装了 XMLHttpRequest 进行异步的数据交互。 GET 方法 GET 方法是 HTTP　请求的默认方法，数据经过简单的编码发送出去，并作为 URL 的一部分发送到服务器。由于浏览器对 URL 长度的限制，提交的数据长度也有限制。 POST 方法 POST 方法克服了 GET 方法的一些缺点，可以发送
利用 FormData 对象发送 Key/Value 对的异步请求
最新发布
05-31
可以使用 XMLHttpRequest 对象来发送异步请求，并将需要发送的数据以 Key/Value 对的形式添加到 FormData 对象中。以下是一个示例代码： ``` // 创建一个 FormData 对象 var formData = new FormData(); // 添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值