html5 ajax带进度条的无刷新上传

最新推荐文章于 2021-06-05 09:34:59 发布

chuansheng8940

最新推荐文章于 2021-06-05 09:34:59 发布

阅读量110

点赞数

文章标签： php 开发工具

原文链接：https://my.oschina.net/strip/blog/738240

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width: 300px;height: 30px;border: 1px solid black}
        #div2{width: 0;height: 30px;background: #ccc; position: relative}
        #div3{width: 300px;height: 30px; line-height: 30px; text-align: center;position: absolute;left: 0;top: 0;}
    </style>
    <script>
        window.onload = function () {

            var oBtn = document.getElementById('btn');
            var oFile = document.getElementById('file');
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            var oDiv3 = document.getElementById('div3');

            oBtn.onclick = function () {
               /* alert(oFile.files);*/
              /* for(var attr in oFile.files){
                   console.log(attr + ' : ' + oFile.files)
               }*/
              var xhr = new XMLHttpRequest();


                xhr.onload = function () {
                    alert('上传成功');
                };
                var oUpload = xhr.upload;
                oUpload.onprogress = function (ev) {
                    //console.log(ev.total + ':' + ev.loaded);
                    var iScale = ev.loaded/ev.total;//这里自己可以截取小数点几位
                    oDiv2.style.width = 300*iScale+'px';
                    oDiv3.innerHTML = iScale*100 + '%';
                };
                xhr.open('post','post_file.php',true);
                xhr.setRequestHeader('X-Request-With','XMLHttpRequest');
                var formData = new FormData();
                formData.append('file',oFile.files[0]);
                xhr.send(formData);
            }

        }
    </script>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
    <div id="div3">0%</div>
</div>
<input type="file" id="file">
<input type="button" id="btn" value="上传">
</body>
</html>

简单地一个实例而已

后台

<?php
/**
 * Created by PhpStorm.
 * User: Strip
 * Date: 2016/8/26
 * Time: 12:47
 */
header('Content-type:text/html;charset="utf-8"');
$upload_dir = 'uploads/';

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status(array('code'=>1,'msg'=>'提交方式错误'));
}
if(array_key_exists('file',$_FILES)&&$_FILES['file']['error'] == 0){

    $pic = $_FILES['file'];

    if(move_uploaded_file($pic['tmp_name'],$upload_dir.$pic['name'])){
        exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
    }
}

echo $_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出现错误'));

function exit_status($str){
    echo json_encode($str);
    exit;
}

转载于:https://my.oschina.net/strip/blog/738240

chuansheng8940

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 ajax带进度条的无刷新上传

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...
复制链接

扫一扫