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. Logstash过滤器修改数据

    数据修改(Mutate) filters/mutate 插件是 Logstash 另一个重要插件.它提供了丰富的基础类型数据处理能力.包括类型转换,字符串处理和字段处理等. 类型转换 类型转换是 fi ...

  2. SSO 证书配置

    ssodev.crt为开发环境证书ssotest.crt为测试环境证书 将证书拷贝到目录:{JDK}\jre\lib\security 其中 {JDK} 是实际安装JDK的位置.然后cmd进入命令窗口 ...

  3. Pandas迭代

    Pandas对象之间的基本迭代的行为取决于类型.当迭代一个系列时,它被视为数组式,基本迭代产生这些值.其他数据结构,如:DataFrame和Panel,遵循类似惯例迭代对象的键. 简而言之,基本迭代( ...

  4. 使用SpringMVC的crud操作时，进行数据修改，但是修改成功后，页面无法显示lastName属性值（被修改的那条记录）

    我这个错误的原因在于,把map的键写错了,它必须和类名第一个字母小写相同 @ModelAttribute public void getEmployee(@RequestParam(value=&qu ...

  5. Ajax-01 Ajax概述

    Web应用程序: 用户浏览器发送请求,服务端接收并处理请求,然后返回结果,往往返回就是字符串(HTML).浏览器将字符串(HTML)渲染并显示到浏览器上. 传统的Web应用: 一个简单操作(每个请求) ...

  6. InnoDB存储引擎的B+树索引算法

    关于B+树数据结构 ①InnoDB存储引擎支持两种常见的索引. 一种是B+树,一种是哈希. B+树中的B代表的意思不是二叉(binary),而是平衡(balance),因为B+树最早是从平衡二叉树演化 ...

  7. iOS自动化探索（四）自动化测试框架pytest - 安装和使用

    自动化测试框架 - pytest pytest是Python最流行的单元测试框架之一, 帮助更便捷的编写测试脚本, 并支持多种功能复杂的测试场景, 能用来做app测试也能用作函数测试 官方文档: ht ...

  8. L138 Cryptocurrency Exchanges at Risk of Manipulation

    Several cryptocurrency exchanges are plagued by poor market surveillance, pervasive conflicts of int ...

  9. C++纯虚函数实现

    纯虚函数就是一个在基类中的虚函数,差别只是在一般的虚函数声明的后面加了"=0",虚函数允许函数通过与函数体之间的联系在运行时才建立,也就是在运行时才决定如何动作,称为运行时的多态性 ...

  10. [转载] C++中this指针的用法详解

    摘自:http://blog.chinaunix.net/uid-21411227-id-1826942.html 1. this指针的用处: 一个对象的this指针并不是对象本身的一部分,不会影响s ...