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. lua笔记之userdata

    1.一直使用框架里封装好的c库,想着自己一点一点的写些例子,学习下,以后需要c库,可以自己写了. 下边是一个简单的userdata的例子--数组操作. newarray.c #include &quo ...

  2. java web 实体类生成

    工具下载地址:https://download.csdn.net/download/g342105676/10813246

  3. Java小程序之回文数字

    题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. 下面是代码: package test; public class BackNum { public st ...

  4. vs添加静态链接库+添加动态链接库+添加头文件目录

    头文件添加方法:工程---属性---配置属性---c/c++---常规---附加包含目录(Additional Include Directories):加上头文件存放目录.注意:(1)路径必须指向头 ...

  5. IOS-SQLite3

    iOS中的数据存储方式 Plist(NSArray\NSDictionary) Preference(偏好设置\NSUserDefaults) NSCoding(NSKeyedArchiver\NSk ...

  6. docker 国内加速器配置

    配置镜像加速器 阿里云 登录到 阿里云获取到专属加速地址bqr1dr1n.mirror.aliyuncs.com 找到服务 deamon.js 所在目录C:\ProgramData\docker\co ...

  7. Vue: webpack js basic structure

    vue webpack所用基础包: nom install vue vue-loader webpack webpack-cli webpack-dev-server vue-template-com ...

  8. sqlserver数据库脱机时发生异常：由于无法在数据库 'SMS' 上放置锁，ALTER DATABASE 失败。请稍后再试。 ALTER DATABASE 语句失败。 (.Net SqlClient Data Provider)

    sqlserver数据库脱机时发生异常,如下: =================================== 设置脱机 对于 数据库“SMS”失败.  (Microsoft.SqlServe ...

  9. css选择器的特殊性值

    今天从前端那拿来写好的页面,就开始动工,首先,照旧处理导航栏高亮的问题, 说到处理高亮的问题,不同的人会有不同的方法,比如: //类名为nav的元素下的第n个a元素 .nav a:nth-of-typ ...

  10. maven install时自动施行单元测试

    maven install时自动执行单元测试 1.maven-surefire-plugin简介 Maven本身并不是一个单元测试框架,它只是在构建执行到特定生命周期阶段的时候,通过插件来执行JUni ...