Ajax+FormData实现大附件上传带进度条

来源：互联网发布：淘宝助手上传失败编辑：程序博客网时间：2024/06/17 03:03

1.php.ini 设置大附件上传限制：

这里写图片描述

2.ajax对象.upload.onprogress事件：
这里写图片描述

3.上传附件代码：

<!DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <script type="text/javascript">            function f1(){                var mypic = document.getElementById('myhead').files[0];                //创建一个FormData空对象，然后使用append方法添加key/value                var fd = new FormData();                fd.append("myhead",mypic);                var xhr = new XMLHttpRequest();                xhr.onreadystatechange = function(){                    if(xhr.readyState==4 && xhr.status==200){                        alert(xhr.responseText);                    }                }                //侦查当前附件上传情况                xhr.upload.onprogress = function(evt){                    //侦查附件上传情况                    //通过事件对象侦查                    //该匿名函数表达式大概0.1秒执行一次                    var loaded = evt.loaded;//已经上传大小情况                    var tot = evt.total;//附件总大小                    var per = Math.floor(100*loaded/tot);  //已经上传的百分比                    var son =  document.getElementById('son');                    son.innerHTML = per + "%";                    son.style.width = per + "%";                }                xhr.open("post","./005.php");                xhr.send(fd);            }            //立刻显示被上传的图片            function f2(){                //利用files获得被上传附件(图片)信息                var mypic = document.getElementById('myhead').files[0];                //利用mypic获得图像的url地址(二进制源码)                //URL  html5新标准属性                //window.URL.createObjectURL(mypic);                document.getElementsByTagName('img')[0].src = window.URL.createObjectURL(mypic);            }        </script>        <style type="text/css">            #parent{width:400px; height:20px; border:2px solid red;}            #son {width:0; height:100%; background-color:lightgreen; text-align:center; line-height:20px; font-size:16px; font-weight:bold;}        </style>    </head><body>    <div id="parent"><div id="son"></div></div>    用户头像：<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />    <img src="" alt="" width="200" height="150"/><br />    <input type="button" value="上传头像" onclick="f1()" /><br /></body></html>

4.后端服务器页面：

//005.php<?php//判断附件是否有问题if($_FILES['myhead']['error'] > 0){    exit('附件有异常问题');}//（1）附件的存储位置、附件名$path = "./upload/";$name = $_FILES['myhead']['name'];//附件的原名字是二维数组元素$truename = $path.$name;//（2）把附件从“临时路径位置”移动到“真实位置”     move_uploaded_file()$is_uploaded = move_uploaded_file($_FILES['myhead']['tmp_name'], $truename);//会返回boolean值if($is_uploaded){    echo "upload success";}else{    echo "upload fail";}

5.运行效果：
这里写图片描述

上面也可以上传非图片文件。

0 0