JQuery ajax 上传文件

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

BIBI2049

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

阅读量431

点赞数

分类专栏： Javascript 文章标签： jquery ajax

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考：https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload

这里写图片描述

旧的浏览器只能通过IFrame在不刷新页码的情况下提交文件到服务器。但在 IE10、Firefox 4.0、Chrome 7、Safari5、Opera 12后，可以利用 FormData 对象方便地提交文件到服务器。

关键代码：

<body>
    <div>
        <form method="post">
            <label>用户名：</label>
            <input id="userName" type="text" name="userName" />
            <br />
            <label>文件名：</label>
            <input id="file" type="file" name="file" />
            <input id="btn" type="button" value="提交" />
        </form>
    </div>
    <script>
        $("#btn").click(function (e) {
            e.preventDefault();
            var formData = new FormData();
            formData.append('file', $('#file')[0].files[0]);
            formData.append('userName', $('#userName').val());

            $.ajax({
                type: "POST",
                // method: "POST", //jquery 1.9 以后版本用method
                url: "/Home/GetFile",
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                data: formData,
                success: function (data, status) {
                    alert("用户名为：" + data.userName + ",上传的文件的大小为：" + data.fileSize);
                }
            });
        });
    </script>
</body>

BIBI2049

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery ajax 上传文件

参考：https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload旧的浏览器只能通过IFrame在不刷新页码的情况下提交文件到服务器。但在 IE10、Firefox 4.0、Chrome 7、Safari5、Opera 12后，可以利用 FormData 对象方便地提交文件到服务器。关键代码：<body> <div>
复制链接

扫一扫

专栏目录