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. PHP的可变变量名

    有时候可变的变量名会给编程带来很大的方便.也就是说变量名可以被动态的命名和使用.通常变量通过下面这样的语句来命名 : 1 2 3 <!--?php $a = 'hello'; ?--> 可 ...

  2. TextView两种显示link的方法

    TextView两种显示link的方法 一.简介 也是TextView显示文本控件两种方法 也是显示丰富的文本 二.方法 TextView两种显示link的方法  1)通过TextView里面的类ht ...

  3. Python subplot 绘画

    环境 Anaconda3 Python 3.6, Window 64bit 目的 利用 matplotlib 画图模块,汇至子图 # -*- coding: utf-8 -*- import matp ...

  4. python 爬虫002-http与urllib2

    urllib2 GET https://www.oschina.net/home/login #!/usr/bin/env python # -*- coding: utf-8 -*- import ...

  5. 获得Ztree选择的节点

    $('#save').click(function(){ if($("#roleForm").form("validate")){ var treeObj = ...

  6. dga 分析

    02n-0iy6gn3ozzwmyu.7i43n9qil1g1z2-.com0e527eaf_5ec5_4623_9fe9_e459583acd72.com0fmgm1cuu7h1279dghgka0 ...

  7. 解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法！超管用！！

    解决loadrunner在脚本回放时长时间等待及在vugen中create controller scenario时报错的方法 经过咨询,有两种方法.经过实践,下面的方法1有效,方法2无效(我下载安装 ...

  8. oracle内存分析

    oracle时间内存=SGA+PGA SGA(System Global Area):由所有服务进程和后台进程共享: PGA(Program Global Area):由每个服务进程.后台进程专有:每 ...

  9. 【scala】迭代器

    如何访问集合呢?我们首先想到的是使用for循环来访问,还有一种方法是通过迭代器来访问. 在Scala中,迭代器(Iterator)不是一个集合,但是,提供了访问集合的一种方法. 迭代器包含两个基本的操 ...

  10. Oracle RAC（Real Application Clusters）

    Oracle RAC 运行于集群之上,为 Oracle 数据库提供了最高级别的可用性.可伸缩性和低成本计算能力.如果集群内的一个节点发生故障,Oracle 将可以继续在其余的节点上运行.Oracle ...