JQuery ajax 上传文件

来源：互联网发布：mac 全角空格编辑：程序博客网时间：2024/05/16 07:36

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

阅读全文

0 0