使用 ajax 实现文件上传

ajax 文件上传主要用到了 FormData,其 API 使用教程如下:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

使用 ajax 实现文件上传

html

<input type="file" name="fileName1" id="fileName1"/>
<input type="button" onclick="sendToUser()" id="sendToUser" value=" 提交 " />

js

        function sendToUser(){ // 在这里进行 ajax 文件上传 用户的信息 
            var $file1 = $("input[name='fileName1']").val();// 用户文件内容 ( 文件)
            // 判断文件是否为空 
            if ($file1 == "") {alert(" 请选择上传的目标文件! ")
                return false;
            }
            // 判断文件类型, 我这里根据业务需求判断的是 Excel 文件
            var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
            if(fileName1 != "xls" && fileName1 !="xlsx"){alert(" 请选择 Execl 文件!");                
                return false;
            }
            // 判断文件大小
            var size1 = $("input[name='fileName1']")[0].files[0].size;
            if (size1>104857600) {alert(" 上传文件不能大于 100M!");
                return false;                
            }

            boo1 = true;
        var type = "file";
        var formData = new FormData();// 这里需要实例化一个 FormData 来进行文件上传
        formData.append(type,$("#fileName1")[0].files[0]);
        // 多文件上传在这里继续 append
        //eg : 
        //formData.append(type,$("#fileName1")[0].files[0]);
        $.ajax({
            type : "post",
            url : "uploadToFile",
            data : formData,
            processData : false,
            contentType : false,
            success : function(data){if (data=="error") {alert(" 文件提交失败!");
                }else{$("input[name='userUrl']").val(data);
                alert(" 文件上传成功!");
            }}
        });
        }

重点最后一段代码即可

手机扫描二维码访问

    本文标题:《使用 ajax 实现文件上传》作者:极四维博客
    原文链接:https://cway.top/post/949.html
    特别注明外均为原创,转载请注明。

    分享到微信

    扫描二维码

    可在微信查看或分享至朋友圈。

    相关文章

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    «    2025年5月    »
    1234
    567891011
    12131415161718
    19202122232425
    262728293031

    搜索

    控制面板

    您好,欢迎到访网站!
      查看权限

    最新留言

    文章归档

    • 订阅本站的 RSS 2.0 新闻聚合