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>

提交处理程序代码 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文件异步上传的更多相关文章

  1. 文件的上传（表单上传和ajax文件异步上传）

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  2. 普通文件的上传（表单上传和ajax文件异步上传）

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  3. 文件的上传（1）（表单上传和ajax文件异步上传）

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  4. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  5. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  6. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  7. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  8. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  9. 小程序使用 Promise.all 完成文件异步上传

    小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...

随机推荐

  1. mysql数据库优化课程---11、mysql普通多表查询

    mysql数据库优化课程---11.mysql普通多表查询 一.总结 一句话总结:select user.username,user.age,class.name,class.ctime from u ...

  2. 20165332 学习基础和C语言基础调查

    学习基础和c语言基础调查 一.技能学习经验 从小学过很多东西,架子鼓.电子琴.街舞.吉他.书法.美术......爱好也有很多,乒乓球.篮球.唱歌......这么多项技能,要说那一项比大多数人好,还真的 ...

  3. Confluence 6 测试电子邮件设置

    一个 Confluence 的管理员可以通过下面的步骤测试电子邮件服务器的配置: 按照上面的步骤中描述得方法设置一个电子邮件服务器. 单击 发送测试邮件(Send Test Email)来检查你设置的 ...

  4. IOS-日期处理

    主要有以下类: NSDate -- 表示一个绝对的时间点NSTimeZone -- 时区信息NSLocale -- 本地化信息NSDateComponents -- 一个封装了具体年月日.时秒分.周. ...

  5. ipmitool 查看硬件信息

    [root@75-6-25-yf-core ~]# cat /var/log/mcelog MCE 0HARDWARE ERROR. This is *NOT* a software problem! ...

  6. 【Hive】执行脚本

    1.linux下执行hive sql脚本 (1)hive -e “sql语句” (2)hive -e “sql语句” >> xxx 将sql查出来的语句重定向到xxx文件中,会显示Ok和数 ...

  7. Codeforces Round #394 (Div. 2) E. Dasha and Puzzle

    E. Dasha and Puzzle time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...

  8. Agilent RF fundamentals （4）- Impedance match and distortions

    1 Impedance match: 2 distortions: Solar radiation produces background noise

  9. Qt 出现“undefined reference to `vtable for”原因总结

    http://blog.csdn.net/chenlong12580/article/details/7431104

  10. Kotlin 第一弹：自定义 ViewGroup 实现流式标签控件

    古人学问无遗力, 少壮工夫老始成.纸上得来终觉浅, 绝知此事要躬行. – 陆游 <冬夜读书示子聿> 上周 Google I/O 大会的召开,宣布了 Kotlin 语言正式成为了官方开发语言 ...