利用html5的FormData对象和ajax实现异步文件上传

原创 2013年12月03日 19:15:32
js部分:
<!doctype html>

<html>


<head>
<meta charset='utf-8'/>
<title>html5拖拽+ajax异步文件上传</title>
</head>


<style>


#box{


    width:100px;
    height:100px;
    border:1px solid green;
    line-height:50px;
    text-align:center;
}
    
</style>
<script>
window.onload=function(){


    var box=document.getElementById('box');


    box.ondragenter=function(ev){


        this.innerHTML="<font color=red>请放下</font>";
        ev.preventDefault();
    };


    box.ondragover=function(ev){
    
        this.innerHTML="<font color=red>请放下</font>";
        ev.preventDefault();
    };


    box.ondragleave=function(ev){
    
        this.innerHTML="<font color=red>请拖入要上传的文件!</font>";
        ev.preventDefault();
    };


    box.ondrop=function(ev){


        var up_file=ev.dataTransfer.files[0];


        var form_data=new FormData();
        //append的第一个参数lpprince是后台接受的文件名,相当于input 的name属性的值
        form_data.append('lpprince',up_file);


        //创建XMLHttpRequest对象


        var xml=new XMLHttpRequest();


        xml.open('post','do_up.php');


        xml.onreadystatechange=function(){
        
            if(xml.readyState==4&& xml.status==200){
            
                box.innerHTML=xml.responseText;
            }
        }
        xml.send(form_data);


        ev.preventDefault();
    };


}


</script>


<body>


<div id='box'><font color=red>请拖入要上传的文件!</font></div>




</body>


</html>

PHP部分:
<?php


$file=$_FILES['lpprince'];


if( is_uploaded_file($file['tmp_name']) ){


    if(!file_exists('./imgs')){
    
        mkdir('./imgs');
    }


    $is_ok=move_uploaded_file($file['tmp_name'],'./imgs/'.date("Y-m-d H:i:s").$file['name']);
    
    if($is_ok){
        echo '<font color="red">上传成功!</font>';
    }else{
        echo '<font color="red">上传失败!</font>';
    }
}






?>


                    

通过Ajax使用FormData对象无刷新上传文件

写在前面:本文说的这个方案有浏览器兼容性问题;所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+,对兼容性比...
  • z69183787
  • z69183787
  • 2016年09月13日 15:35
  • 4518

ajax与html5实现异步文件上传

ajax与html5实现异步文件上传        在之前的两篇文章中,分别介绍了XMLHttpRequest对象和iframe伪异步文件上传。在此就不再介绍介绍XMLHttpRequest对象了。之...
  • aozeahj
  • aozeahj
  • 2016年11月02日 15:52
  • 545

FormData对象异步上传文件

XMLHttpRequest Level 2添加了一个新的接口FormData,利用FormData对象,我们可以使用XMLHttpRequest的send()方法异步的提交数据,比起普通的ajax,...
  • kongjunchao159
  • kongjunchao159
  • 2015年10月27日 09:56
  • 503

使用FormData进行Ajax请求异步上传图片案例

工作时遇到一个对轮播图管理的需求,开发过程遇到些问题,总算顺利解决,记录下来供大家参考。原项目是基于SSM框架搭建的,现将Ajax图片上传部分分享如下: 1.dao层代码    insert i...
  • wf787283810
  • wf787283810
  • 2017年07月07日 15:40
  • 478

Spring利用MultipartFile接收FormData对象上传文件(可接收AJAX上传的包含多文件的复杂表单内容)

SpringMvc多文件上传
  • Nifury
  • Nifury
  • 2016年09月01日 12:06
  • 6161

ajax和HTML5异步文件上传之进度条

ajax和HTML5异步文件上传之进度条       在之前的文章中已经介绍过ajax的异步文件上传,这篇文主要是在上一篇文章的基础上,添加了一个上传进度条。       主要是思路是:在XMLH...
  • aozeahj
  • aozeahj
  • 2016年11月03日 10:55
  • 1300

HTML5 jQuery+FormData 异步上传文件,带进度条

利用jQuery和html5的FormData异步上传文件的好处是: 实现很简单很方便地支持进度条很方便地进行扩展和美化 先看看效果图: 图片上传后的结果: ...
  • ClementAD
  • ClementAD
  • 2015年11月08日 11:58
  • 5846

ajax上传文件(FormData 对象的使用)

如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: var formData = new FormData(); f...
  • u013772876
  • u013772876
  • 2017年03月30日 15:49
  • 335

Ajax+FormData实现大附件上传带进度条

1.php.ini 设置大附件上传限制: 2.ajax对象.upload.onprogress事件: 3.上传附件代码: ...
  • Yeoman92
  • Yeoman92
  • 2016年11月16日 14:08
  • 883

实现无刷新上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码   form id= "uploadForm" action= "http://localhost:8080/cfJA...
  • zmx729618
  • zmx729618
  • 2017年01月12日 13:13
  • 843
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用html5的FormData对象和ajax实现异步文件上传
举报原因:
原因补充:

(最多只允许输入30个字)