H5特性之FormData不刷新文件上传

vincent_xyb 发布于2019-08-21 10:34 / 723人阅读

摘要：杂言之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种库，附带多图上传，预览，甚至是图片处理等特技。但是是个好东西，他提供了，可以帮助我们拼凑参数，乃至文件资源。测试上传可以看到请求到了看下，就可以看到返回的相关信息了。

杂言

之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库，附带多图上传，预览，甚至是图片处理等特技。那么如果不接触第三方的库，可不可以利用ajax来做。就这个问题，有人给出的解决方案是借助iframe,这里就不赘述了。但是Html5是个好东西，他提供了FormData，FormData可以帮助我们拼凑参数，乃至文件资源。这样，我们就可以轻松用$.ajax不刷新上传。当然也不需要iframe。

代码

下列是前端部分。

不多赘述里面的代码，就讲一行代码
var data = new FormData($("#add")[0]);

FormData是一个表单对象，他可以将表单对象的表单域分别形成key=>value。那么是不是我们自己再拼接额外的key=>value呢，答案是可以的，详情可以百度FormData。

还有就是为什么是$("#add")[0]?
我只能说 js = jQuery[0];

PHP部分

这边只是做下测试，如果能看到$_FILES有东西，那么证明我们是可以做上传的。

测试上传

可以看到ajax请求到了ajax.php

看下preview，就可以看到返回$_FILES的相关信息了。

GPU云服务器云服务器 formdata上传文件无刷新文件上传 h5 js 文件上传无刷新上传文件iframe

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85775.html

H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

NervosNetwork 2019-08-22 15:57 评论0 收藏0
一步一步搭建一个图片上传网站（后台服务器用nodejs）

摘要：把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器，利用中间件指定文件路径。利用这个前端和后端技术，我们基本上就可以做出一个图片上传存储的基本网站核心。前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 评论0 收藏0
H5拖放异步文件上传之二——上传进度监听

摘要：添加功能显示待上传文件列表支持移除待上传文件使用显示上传进度支持中断上传方法返回一个对象，用来表示上传的进度。监听数据传输进行中通过监听这个事件，可获得上传进度。上一篇《H5拖放+FormData接口+NodeJS，完整异步文件上传（一）》，我们走通了拖放文件上传的整个流程，但离实际使用场景还有差距。这篇，我们来添加几个实际使用场景必要的功能，向实际使用再走一步。添加功能显...

Godtoy 2019-08-22 16:20 评论0 收藏0