采用formdata做跨域的、无刷新、带进度条的文件上传

最新推荐文章于 2024-08-08 10:15:42 发布

丰云

最新推荐文章于 2024-08-08 10:15:42 发布

阅读量2.2k

点赞数

分类专栏：前端应用文章标签： html5 formdata upload 进度条无刷新

本文链接：https://blog.csdn.net/foren_whb/article/details/51940789

版权

前端应用专栏收录该内容

62 篇文章 0 订阅

订阅专栏

以前做无刷新上传，都要用iframe，如果想有进度条，就千难万难，不得不用flash等插件来实现。

现在HTML5终于普及了，筒子们不用再那么痛苦了。

所有这一切都变得异常简单！！

不信？且看如下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test formdata upload</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        var onProgress = function (e) {
            if (e.lengthComputable) {
                document.getElementById("progressBar").style.width = Math.round(e.loaded * 100 / e.total) + 'px';
            }
        };
        $(function () {
            $('#uploadBtn').on('click', function () {
                var fdata = new FormData();
                fdata.append('file', $('#testFile')[0].files[0]);
                var xhr = new XMLHttpRequest();
                //xhr.onprogress = onProgress; //下载监听
                xhr.upload.onprogress = onProgress; //上传监听
                xhr.open("POST", "http://192.168.2.152:89/api/values", true);
                xhr.send(fdata);
                return false;
            });
        });
    </script>
</head>
<body>
    <div style="width:600px;margin:10px auto;background-color:#fff;">
        <input type="file" id="testFile" name="testFile" multiple="multiple" />
        <div id="progressBar" style="background-color:#ccf;height:8px;width:0px;border-radius:3px;border:0px;"></div>
        <input id="uploadBtn" type="button" value="submit" />
    </div>
</body>
</html>

webapi后台代码：

        public string Post()
        {
            if (request.Files.Count > 0)
            {
                var file = request.Files[0];
                var fileName = file.FileName.Substring(file.FileName.LastIndexOf('.'));
                file.SaveAs("D:\\log\\upload\\" + fileName);
            }
            return "ok";
        }

注意事项：

1. webapi的webconfig添加如下内容，你懂的：

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="*" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  <system.webServer>

2.webapi一定要发布后才能正常使用，否则chrome会报405错误，我就是在这点上被整了一整天。。。。我擦。。。。

另外，这里有一个没有解决的不算问题的问题，心有不甘，还是希望能有人帮我解决它：

就是这个代码，在chrome和firefox浏览器里执行时，会发送两个请求，第一个是个options请求，第二个才是正常的post请求，

请问有没有大侠知道如何去掉第一个options请求啊？？？？