使用jquery的file提交文件上传

最新推荐文章于 2022-12-07 18:26:46 发布

zeke_x

最新推荐文章于 2022-12-07 18:26:46 发布

阅读量2.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_41997724/article/details/86289432

版权

JS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

使用jquery的file提交文件上传

我们都知道ajax不能传递文件，但是html新出的一个formdata可以。我首先想到的就是这个方法

点击提交上传代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="upfile" id="upfile"/>
<button class="btn">提交</button>

<script>
    $(function () {
        $(".btn").click(function(){
            var formData = new FormData();
           // console.log($("#upfile")[0].files[0]);
            formData.append("files", $("#upfile")[0].files[0]);
          //  console.log(formData.get('files'));
            $.ajax({
                url: 'http://xmt.wingoi.com:8090/FH_AM6/api/fileUpload/upload',
                data: formData,
                type: "post",
                dataType: 'json',
                cache : false,
                contentType : false,
                processData : false,
                success: function(data) {
                    console.log(data);
                    console.log(data.url);
                },
                error:function () {
                    console.log("获取失败")
                }
            })
        });

    })



</script>
</body>
</html>

选择文件后直接上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="file" name="upfile" id="upfile"/>

<script>
    //创建fileLoad方法用来上传文件
    function fileLoad(ele) {
        //创建一个formData对象
        var formData = new FormData();
        //获取files
        var files = $(ele)[0].files[0];
        //将 files 添加到formData中，键值对形式
        formData.append("files", files);
       // console.log(files)
        //  console.log(formData.get('files'));
        $.ajax({
            url: 'http://xmt.wingoi.com:8090/FH_AM6/api/fileUpload/upload',
            data: formData,
            type: "post",
            dataType: 'json',
            cache : false,
            contentType : false,
            processData : false,
            success: function(data) {
                console.log(data);
                console.log(data.url);
            },
            error:function () {
             console.log("获取失败")
         }
        })
    }
    $(function () {
        var $input =  $("#upfile");
        // ①为input设定change事件
        $input.change(function () {
            //    ②如果value不为空，调用文件加载方法
            if($(this).val() != ""){
                fileLoad(this);
            }
        })
    })



</script>
</body>
</html>

zeke_x

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用jquery的file提交文件上传

使用jquery的ajax提交文件上传我们都知道ajax不能传递文件，但是html新出的一个formdata可以。我首先想到的就是这个方法点击提交上传代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title
复制链接

扫一扫