文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用Html5实现异步上传文件,支持跨域,带有上传进度条

2024-04-02 19:55

关注

这篇文章主要为大家展示了“如何使用Html5实现异步上传文件,支持跨域,带有上传进度条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Html5实现异步上传文件,支持跨域,带有上传进度条”这篇文章吧。

服务器准备IIS

需要设置IIS里面的HTTP响应标头,如图添加如下设置,添加这项“Access-Control-Allow-Origin”,只有添加了这行才能支持跨域,不然像Chrome浏览器会报错

如何使用Html5实现异步上传文件,支持跨域,带有上传进度条

如何使用Html5实现异步上传文件,支持跨域,带有上传进度条

页面代码:

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    <meta name="format-detection" content="telephone=no">  
    <meta name="msapplication-tap-highlight" content="no">  
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">  
    <title>Html5上传文件</title>  
</head>  
<body>  
    <div class="app">  
        <h2>Html5上传文件测试,带进度条</h2>  
        <div>  
            <input type="file" value="" id="fileInput" name="files" onchange="fileSelected()" />  
            <div style="margin:30px;">  
                <input type="button" value="上传" onclick="uploadFile()" />  
            </div>  
            <div style="margin:30px;">  
                <div id="fileName"></div>  
                <div id="fileSize"></div>  
                <div id="fileType"></div>  
            </div>  
            <div style="margin:30px;width:500px;height:15px;border:1px solid #aeaeae;">  
                <div id="progress" style="background:#4cff00;height:15px;width:0%;"></div>  
                <div id="percentNumber"></div>  
            </div>  
            <div style="margin:30px;">  
                <div id="msg"></div>  
            </div>  
        </div>  
    </div>  
    <script type="text/javascript">  
        function fileSelected() {   
            //重置状态显示   
            document.getElementById("msg").innerHTML = "";   
            document.getElementById('percentNumber').innerHTML = '';   
            document.getElementById("progress").style.width = "0%";   
            var file = document.getElementById('fileInput').files[0];   
            if (file) {   
                var fileSize = 0;   
                if (file.size > 1024 * 1024)   
                    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';   
                else   
                    fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';   
                document.getElementById('fileName').innerHTML = 'Name: ' + file.name;   
                document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;   
                document.getElementById('fileType').innerHTML = 'Type: ' + file.type;   
            }   
        }   
  
  
        function uploadFile() {   
            var fd = new FormData();   
            fd.append("fileInput", document.getElementById('fileInput').files[0]);   
            var xhr = new XMLHttpRequest();   
            xhr.upload.addEventListener("progress", uploadProgress, false);   
            xhr.addEventListener("load", uploadComplete, false);   
            xhr.addEventListener("error", uploadFailed, false);   
            xhr.addEventListener("abort", uploadCanceled, false);               
            xhr.open("POST", "http://10.0.0.200:9001/Home/Upload");//修改为自己服务器接口地址   
            //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");//需要在IIS里面配置,就可以跨域请求了   
            //xhr.setRequestHeader("Content-Type", "multipart/form-data");   
            xhr.send(fd);   
        }   
        function uploadProgress(evt) {   
            if (evt.lengthComputable) {   
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);   
                document.getElementById('percentNumber').innerHTML = percentComplete + '%';   
                var jindutiao = document.getElementById("progress");   
                jindutiao.style.width = percentComplete + "%";   
            }   
            else {   
                document.getElementById('percentNumber').innerHTML = '不支持进度计算';   
            }   
        }   
        function uploadComplete(evt) {   
            //evt.target.responseText   
            document.getElementById("msg").innerHTML = "上传成功";   
        }   
        function uploadFailed(evt) {   
            document.getElementById("msg").innerHTML = "上传过程中有一个错误";   
        }   
        function uploadCanceled(evt) {   
            document.getElementById("msg").innerHTML = "用户取消了上传或者浏览器删除了连接";   
        }   
    </script>  
</body>  
</html>

以上是“如何使用Html5实现异步上传文件,支持跨域,带有上传进度条”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯