码迷,mamicode.com
首页 > Web开发 > 详细

使用FormData实现ajax文件异步上传

时间:2016-07-31 20:40:19      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:

1.传统的web开发文件上传一般是基于form表单的文件上传,同步的方式,用户体验差,可控性也差

2.异步上传的实现 有以下方式

   2.1 借助浏览器插件 一般需要安装一些类似flash的插件  这种方式 缺点:需要安装插件  优点:可控性强,性能高

   2.2 这种是伪异步上传,借助表单向隐藏的iframe提交,然后通过iframe通信操作当前页面 这种方式可控行查,体验一般,见下面代码

   2.3 借助html5 里的 FormData 对象,可实现进度控制,异步的上传方式,见代码

iframe方式的伪异步上传

up.html

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<form method="post"  action="doup.php" enctype="multipart/form-data" target="up_file">
    姓名:<input name="user" type="text"><br>
    文件:<input type="file" name="ff"><br>
    <input type="submit" value="提交">
</form>
<iframe name="up_file" style="display: none"></iframe>
<div id="res"></div>
</body>
</html>
View Code

提交处理程序代码 doup.php

技术分享
<?php
if($_FILES){
    $f=$_FILES[‘ff‘];
    $tmp_name=$f[‘tmp_name‘];
    if($f[‘error‘]===0){
        if(is_uploaded_file($tmp_name)){
            $file_arr=pathinfo($f[‘name‘]);
            //防止特殊文件名
            if(!is_dir(‘./upfile‘)) mkdir(‘./upfile‘,0755);
            $dst_file=‘./upfile/‘.time()."-".substr(md5($file_arr[‘filename‘]),0,5).".".$file_arr[‘extension‘];
            $o=move_uploaded_file($tmp_name,$dst_file);
            if($o){
                $html=<<<E
                 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
                 <script>
                 var parent=window.parent.document;
                 var img="<img src=‘$dst_file‘ style=‘width:200px;height:200px;‘>";
                $(‘#res‘,parent).html(img);
                 </script>
E;
                echo $html;
            }else{
                echo 0;
            }
        }
    }
}
后端处理

借助FormData实现真的可控行异步上传

up1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
    文件:<input type="file" name="myfile" id="myfile"><br>
    <p id="upbtn">
        <input type="button" value="异步上传" onclick="upload()">
        <span id="uptext" style="display: none">正在上传</span>
        <span id="tip"></span>
        <button id="stopbtn" style="display: none">停止上传</button>
    </p>
    <div id="res"></div>
<script>
    function upload(){
        var fd=new FormData();
        var f=$("#myfile")[0].files[0];
        if(typeof f !== "object") {
            alert(请先选择文件!);
            return false;
        }
        fd.append(myfile,f);
        var xhr=new XMLHttpRequest();

        xhr.upload.onprogress=function(e){
            if(e.lengthComputable){
                var percent=Math.round((e.loaded*100/e.total));
                console.log(%d,percent);
                $(#tip).text(percent);
            }
        }

        xhr.onloadstart=function(e){
            console.log("load start");
            $(#tip).text(开始上传);

            $(#stopbtn).one(click,function(){
                xhr.abort();
                $(this).hide();
            });
            loading(true);

        }

        xhr.onload=function(e){
            var res=xhr.responseText;
            var res_arr=JSON.parse(res);
            console.log(res_arr);
            if(res_arr.status==1){
                $(#tip).text(上传成功);
                $(#res).html(res_arr.dst);
            }else{
                $(#tip).text(res_arr.info);
            }

        }

        xhr.onerror=function(){
            console.log(error);
            $(#tip).text(发生错误);
        }

        xhr.onloadend=function (e){
            console.log("load end");
            loading(false);
        }
        xhr.open("POST","./doup1.php",true);
        xhr.send(fd);
    }

    function loading(showloading) {
        if (showloading) {
            $("#uptxt").show();
            $("#stopbtn").show();
        } else {
            $("#uptxt").hide();
            $("#stopbtn").hide();
        }
    }

</script>
</body>
</html>

后端处理doup1.php

<?php
$status=0;
$arr=array(‘status‘=>0,‘info‘=>‘没有文件上传或上传配置问题‘);
if($_FILES){

    $f=$_FILES[‘myfile‘];
    $tmp_name=$f[‘tmp_name‘];
    if($f[‘error‘]===0){
        if(is_uploaded_file($tmp_name)){
            $file_arr=pathinfo($f[‘name‘]);
            if(!is_dir(‘./upfile‘)) mkdir(‘./upfile‘,0755);
            $dst_file=‘./upfile/‘.time()."-".substr(md5($file_arr[‘filename‘]),0,5).".".$file_arr[‘extension‘];
            $o=move_uploaded_file($tmp_name,$dst_file);
            if($o){
                $arr=array(‘dst‘=>$dst_file,‘status‘=>1);
            }else{
                $arr=array(‘status‘=>0,‘info‘=>‘移动文件失败‘);
            }
        }
    }else{
        $arr=array(‘status‘=>0,‘info‘=>"up_err_code:".$f[‘error‘]);
    }
}
echo json_encode($arr);

 

使用FormData实现ajax文件异步上传

标签:

原文地址:http://www.cnblogs.com/HKUI/p/5723701.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!