图片上传并回显Ajax异步篇

最新推荐文章于 2022-03-06 17:16:46 发布

奇迹码农

最新推荐文章于 2022-03-06 17:16:46 发布

阅读量1.7k

点赞数

文章标签： ajax FormData

本文链接：https://blog.csdn.net/weixin_42225141/article/details/80357925

版权

本文介绍了一个使用Ajax异步上传图片并实时回显的实例，通过FormData对象封装表单数据，利用jQuery处理change事件，实现无刷新上传多张图片。详细讲解了实现过程，包括HTML、CSS和JavaScript代码，以及处理用户选择图片和添加新上传框的逻辑。

摘要由CSDN通过智能技术生成

图片上传并回显Ajax异步篇

图片如何无刷新的上传到服务器呢?继前两篇文章后，我们来实战一下如何无刷新的异步上传图片，我们还是先看一下效果

图片上传并回显Ajax异步篇

在实战前呢，我们需要做些准备工作。比如说，了解一下FormData对象

“FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。”;

这是官方的讲解，我来说一下我的理解，我们new 一个FormData( $(form) )对象时，它会帮我们把form表单里的数据封装成键值对的形式，以前我们都时用input的submit进行提交数据，当我们拿到这个form对象的时候，我们就可以用ajax模拟input的submit提交，既然知道了这些，我们就开始一步步的编程吧。

我们先完善一下界面，看一下下面的代码

这是body里的内容，不要忘了form，只是没有了action，enctype属性也要设置好，我的上一篇文章有对enctype的讲解图片上传并回显后端篇

<body>
<form id="formTag1" enctype="multipart/form-data">
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" id="file1">
    </div>
</form>
</body>

这是css里的内容

<style>
    .uploadImgBtn {
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        background: url("img/plus.png") no-repeat;

最低0.47元/天解锁文章

奇迹码农

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
图片上传并回显Ajax异步篇

图片上传并回显Ajax异步篇图片如何无刷新的上传到服务器呢?继前两篇文章后，我们来实战一下如何无刷新的异步上传图片，我们还是先看一下效果在实战前呢，我们需要做些准备工作。比如说，了解一下FormData对象“FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使...
复制链接

扫一扫