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

goblinM

于 2018-06-10 16:45:09 发布

阅读量3.9k

点赞数

本文链接：https://blog.youkuaiyun.com/goblinM/article/details/80586917

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在看这篇文章前可以先看一下这一篇：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="form-group">
                        <label for="file" class="col-sm-3 control-label">附件选择 :</label>
                        <div cla

最低0.47元/天解锁文章