JQuery ajax 上传文件

参考: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>

猜你喜欢

转载自blog.csdn.net/jifgjifg/article/details/73571892