Js+php实现异步拖拽上传文件


Posted in Javascript onJune 23, 2015

异步拖拽上传文件--小实例

upload.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      #box{
        width:150px;height: 150px;border: 1px solid red;
      }
    </style>
    <script type="text/javascript" src="XMLhttpReuest.js"></script>
    <script>
      window.onload = function () {
        var box = document.getElementById('box');
        box.ondragenter = function (e) {
          e.preventDefault();
        }
        box.ondragover = function (e) {
          e.preventDefault();
        }
        box.ondragleave = function (e) {
          e.preventDefault();
        }
        box.ondrop = function (e) {
          e.preventDefault();
          var file = e.dataTransfer.files[0];
          var formData = new FormData();
          formData.append('aa', file);
 
          var xml = ajaxFunction();
          xml.open("post", './upload.php', true);
          xml.send(formData);
          xml.onreadystatechange = function () {
            if (xml.readyState == 4 && xml.status == 200) {
              var flag = xml.responseText;
              console.log(flag);
              if (flag == 1) {
//                box.innerHTML="上传成功";
                alert('上传成功');
              }
            }
          }
        }
 
 
      }
    </script>
  </head>
  <body>
    <div id="box">
      请拖入上传的文件
    </div>
  </body>
</html>

upload.php

<?php

header("Content-Type:text/html;charset=UTF-8");

if(is_uploaded_file($_FILES['aa']['tmp_name'])){

    move_uploaded_file($_FILES['aa']['tmp_name'], "./".iconv("UTF-8", "GBK", $_FILES['aa']['name']));

    echo '1';

}

 XMLhttpReuest.js

function ajaxFunction()
 {
 var xmlHttp;
 try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
 catch (e)
  {
 // Internet Explorer
  try
   {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
  catch (e)
   {
   try
     {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
   catch (e)
     {
     alert("您的浏览器不支持AJAX!");
     return false;
     }
   }
  }
  return xmlHttp;
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
angularJS 中input示例分享
Feb 09 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
javascript框架设计之类工厂
Jun 23 #Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 #Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 #Javascript
简述AngularJS相关的一些编程思想
Jun 23 #Javascript
javascript框架设计之种子模块
Jun 23 #Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 #Javascript
javascript框架设计之框架分类及主要功能
Jun 23 #Javascript
You might like
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php创建无限级树型菜单
2015/11/05 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python底层封装实现方法详解
2020/01/22 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
医药代表个人的求职信分享
2013/12/08 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
业务总经理岗位职责
2014/02/03 职场文书
《在家里》教后反思
2014/03/01 职场文书
小学作文评语大全
2014/04/21 职场文书
建筑投标担保书
2014/05/20 职场文书
聘任书范文大全
2015/09/21 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis