2024-05-25
温故知新
00
请注意,本文编写于 137 天前,最后修改于 137 天前,其中某些信息可能已经过时。

目录

问题
优化

问题

通过传统的 form 表单提交的方式上传文件

html
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">        <p>上传文件:<input type ="file" name="file"/></p>        <input type="submit" value="上传"/>   </form>

不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的。

使用 serialize() 对 form 表单进行序列化提交

javascript
$.ajax({        url: "",        type: "POST",        data: $('#uploadForm').serialize(),        success: function(data) {           },        error: function(data) {      }   });

如上,通过 $('#uploadForm').serialize() 可以对 form 表单进行序列化,从而将 form 表单中的所有参数传递到服务端。

但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做 FormData 的对象,有了这个对象就可以轻松地使用 Ajax 方式进行文件上传了。

优化

使用 FormData 进行 Ajax 请求并上传文件

html
<form id="uploadForm">         <p>上传文件:<input type="file" name="file" /></p>         <input type="button" value="上传" onclick="upload()" />   </form>
javascript
function upload() {        var formData = new FormData($("#uploadForm")[0]);        $.ajax({             url: '',             type: 'POST',             data: formData,             async: false,             cache: false,             contentType: false,             processData: false,             success: function(data) {           },             error: function(data) {                }        });   }

基本Ok,没有什么问题了,记得一定需要写明 [0],不然拿不到文件名

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:作者:huxiangen  来源:CSDN  原文:https://blog.csdn.net/huxiangen/article/details/84970394