input file 文件上传二：input file 前端

最新推荐文章于 2024-07-12 15:49:20 发布

原创

最新推荐文章于 2024-07-12 15:49:20 发布 · 3.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了前端如何使用input file进行文件上传，包括form表单的设置、FormData对象的使用，以及文件上传的相关操作。提供了代码示例和相关资源链接，帮助理解文件上传流程。

在看这篇文章前可以先看一下这一篇：https://blog.youkuaiyun.com/goblinm/article/details/80586507

样品如图：

附件：点击选择文件弹出本地文件夹

附件名称：为选择的文件重新命名存储，这是后台工作后面再说。

代码：

<div class="modal fade" id="add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">附件上传</h4>
            </div>
            <div class="modal-body">
                <form method="POST" enctype="multipart/form-data" class="form-horizontal" id="upload">


                     <div class="f