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 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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准确获取文件MIME类型的方法
2015/06/17 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP实现百度人脸识别
2019/05/06 PHP
php use和include区别总结
2019/10/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python 实现try重新执行
2019/12/21 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
实习生自我评价
2014/01/18 职场文书
职工运动会邀请函
2014/01/19 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
庆元旦广播稿
2014/02/10 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
反邪教标语
2014/06/23 职场文书
企业员工集体活动方案
2014/08/17 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
会计简历自我评价
2015/03/10 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript