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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
Javascript模块化编程详解
Dec 01 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
精通JavaScript的this关键字
May 28 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
展会邀请函范文
2014/01/26 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2014年项目工作总结
2014/11/24 职场文书
工作能力自我评价2015
2015/03/05 职场文书
离职证明范本
2015/06/12 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
python中数组和列表的简单实例
2022/03/25 Python