前端文件上传功能

最新推荐文章于 2024-12-25 22:57:14 发布

原创最新推荐文章于 2024-12-25 22:57:14 发布 · 252 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #html

收录于

前端专栏收录该内容

4 篇文章

订阅专栏

该博客介绍了如何使用HTML的input元素实现多文件上传，并限制上传文件类型为.zip和.png。通过AJAX进行后台数据提交，利用FormData对象存储表单数据，确保文件上传过程中不被jQuery处理。

项目场景：

需要将本地文件资源上传

html页面

使用input上传文件

multiple="multiple" 可以多个文件上传

accept=".zip,image/png" 可以接受的格式

<form>
<input type="file" multiple="multiple" accept=".zip,image/png" id="img_input" name="file[]" style="margin-left: 1000px;color: wheat;">

<hr>

<input type="button" id="btn" style="margin-left: 1000px;" onclick="upload()" value="提交"/ >
</form>

js页面：

// 创建
var form_data = new FormData();

// 获取文件
var file_data = $("#img_input").prop("files");
var JsonLEN = Object.keys(file_data).length

// 把所有表单信息
form_data.append("firstName", firstName);
form_data.append("secondName", secondName);
form_data.append("file", file);
form_data.append("png", png);
           
    
            $.ajax({
                type: "POST",
                url: "",
                dataType : "json",
                async: false,
                processData: false,  // 注意：让jQuery不要处理数据
                contentType: false,  // 注意：让jQuery不要设置contentType
                data:form_data,
                success:function (){
                    console.log("success")
                }
                });