html5用ajax方式实现文件上传并显示进度

最新推荐文章于 2020-07-14 23:26:22 发布

安迪潘

最新推荐文章于 2020-07-14 23:26:22 发布

阅读量3.3k

点赞数

分类专栏： Html5/JS/CSS 文章标签： html5 javascript

本文链接：https://blog.csdn.net/andypan1314/article/details/50611888

版权

该博客演示了如何利用HTML5的FormData和XMLHttpRequest对象，通过Ajax方式实现文件上传，并实时显示上传进度。用户选择文件后，JavaScript函数UploadFile()被触发，将文件发送到upload.php进行处理。同时，progressFunction()函数用于更新进度条和百分比显示。当文件上传成功，会调用processData()处理数据，并通过getProgress()获取处理进度。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>Html5 Ajax 上传文件</title>
    <script type="text/javascript">

        function UploadFile() {
            var fileObj = document.getElementById("myfile").files[0]; // js 获取文件对象
            var FileController = "upload.php";                    // 接收上传文件的后台地址 

            // FormData 对象
            var form = new FormData();
            form.append("uploadtype", "html5");                        // 可以增加表单数据
            form.append("myfile", fileObj);                           // 文件对象

            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
            	var result = eval('(' +

最低0.47元/天解锁文章

安迪潘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html5用ajax方式实现文件上传并显示进度

Html5 Ajax 上传文件 function UploadFile() { var fileObj = document.getElementById("myfile").files[0]; // js 获取文件对象 var FileController = "upload.php";
复制链接

扫一扫

专栏目录