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

最新推荐文章于 2025-06-11 06:24:12 发布
转载 最新推荐文章于 2025-06-11 06:24:12 发布 · 1.2k 阅读 · 0
文章标签：

#php #jquery #javascript #文件

本文介绍了一个简单的拖拽文件上传功能实现方法，并使用AJAX进行异步文件上传处理。通过HTML5的drag and drop API及FormData API完成文件选择与上传，配合PHP后端实现文件接收。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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>
    <p id="box">
      请拖入上传的文件
    </p>
  </body>
</html>

upload.php

1
2
3
4
5
6
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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;
}
简单实现ajax拖拽上传文件
10-18
在web开发中，AJAX拖拽上传文件是一种比较常见的技术需求，它可以提高用户上传文件的体验，使用拖拽方式上传文件能够更加直观方便。要实现这一功能，我们需要对HTML5拖拽API有一定的了解，并且还需要掌握AJAX的基本...
php拖拽上传_JS实现的文件拖拽上传功能示例
weixin_42513870的博客
03-09 263
本文实例讲述了JS实现的文件拖拽上传功能。分享给大家供大家参考，具体如下：www.jb51.net JS文件拖拽上传div{width: 300px;height: 300px;border:1px dashed #000;position:absolute;top: 50%;left: 50%;margin:-150px 0 0 -150px;text-align:center;font:20p...
HTML5无插件拖拽图片上传功能实现详解
最新发布
专注于与编程相关的知识内容分享
06-11 988
在Web开发中，文件上传是常见的交互需求。传统文件上传方式依赖 `<input type="file">` 组件，但其交互体验较为单一。HTML5通过引入 **拖放API（Drag & Drop API）** 和 **File API**，实现了更高效的文件操作功能。本文将详细介绍如何基于HTML5实现 **无插件拖拽图片上传功能**，包括技术原理、实现步骤及代码示例。
php和js实现文件拖拽上传
weixin_33693070的博客
03-01 234
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/1399/demo/   zyupload四种不同的PHP上传demo http://www.sucaihuo.com/php/1085.html demo http://www.sucaihuo.com/...
js 即时上传php_Js+php实现异步拖拽上传文件
weixin_29001419的博客
03-09 112
异步拖拽上传文件--小实例upload.htmlTODO supply a title#box{width:150px;height: 150px;border: 1px solid red;}window.onload = function () {var box = document.getElementById('box');box.ondragenter = function (e) {e...
html5+php实现文件拖动上传功能
weixin_34313182的博客
10-27 395
界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：   　　拖拽上传最重要的就是js部分的代码，...
Dropzone.js实现文件拖拽上传实例
03-31
dropzone.js是一个开源的JavaScript库，提供 AJAX 异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单，...
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
12-07
在本文中，我们将深入探讨如何使用基于Bootstrap的上传插件FileInput实现AJAX异步上传功能，同时支持多文件...这个插件不仅提供了丰富的功能，还具有良好的可定制性，使其成为Web应用中实现文件上传功能的理想选择。
HTML5 + PHP 拖拽文件上传
qq_36106235的博客
12-07 1260
Drag&Drop : HTML5基于拖拽的事件机制. File API :  可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList和 FileReader接口。 FormData : FormData是基于 XMLHttpRequest Le
php实现拖拽文件上传,jQuery插件实现文件上传功能（支持拖拽）
weixin_29630465的博客
03-11 333
搜索热词首先我们要说的就是FileReader对象，这是一个HTML5提出的，专门用来异步的读取用户计算机上文件的对象，。所以如果我们想要使用它，那么首先我们得先创建一个FileReader对象。1、这个对象拥有五个方法：下面附上一个例子：效果图：其他的几个方法也基本上大同小异，所以在这里就不做过多解释了。2、这个对象还拥有三个状态常量：3、这个对象还拥有三个属性：4、6个事件处理程序：这里我们再...
php 图片+视频+音频上传（支持预览+拖拽）
06-26
php 图片+视频+音频上传（支持预览+拖拽） 包含图片的预览 视频的预看 音频的预听 直接能运行 1将项目放到 www 目录下 2.访问路径 localhost http://localhost/upload/basic-plus.html
这是一个以php作为后台的 文件上传客户端 支持拖拽批量上传
02-09
局域网上传文件 支持批量,拖拽上传 环境: php > 5.6 apache/nginx等
php+js异步图片上传demo
01-14
php+html+ajax异步上传文件demo，可以参考更改，根据自己需求更改
php拖拽上传大文件,如何实现文件拖拽上传
weixin_35697229的博客
03-11 481
拖拽选择文件屏蔽默认事件刚开始的时候，是在网上找了一个例子，这个例子中提到，需要在document上屏蔽和drag相关的所有事件的默认处理方式，代码如下：$(document).on({dragleave:function(e){ //拖离e.preventDefault();},drop:function(e){ //拖后放e.preventDefault();},dragenter:f...
php实现拖拽文件上传,HTML5之文件拖拽上传
weixin_39574720的博客
03-11 322
标签： 前端、交互今天某产品经理蹭蹭蹭跑过来说，我们现在项目里对图片、文件上传的交互体验不太好，可不可以实现拖拽上传。然而拖拽要用到HTML5的Drag和drop属性，并不兼容非现代浏览器。各位前端的同学们都曾为了IE8兼容舍弃了很多交互上的体验，但是何不做个区分，让使用现代浏览器的用户感受到我们炫酷的产品体验呢。接下来是实践！首先使用Web Worker判断是否为支持HTML5的浏览器if (t...
php 文件拖拽上传,File杂谈——拖拽异步上传实现
weixin_42416398的博客
03-26 402
在前一篇文章《File杂谈——拖拽上传前传》中我制作了一个静态的拖拽上传界面，拖拽文件到显示区域释放，可以显示拖入文件的基本信息。本文将在此基础上进一步加工，打造一个完整的拖拽上传示例。示例说明点击区域选择文件或直接将文件拖入区域，触发文件上传功能，文件将异步发送到服务器。待服务端处理完成后返回基本信息，在页面中显示。由于服务器容量问题，本示例未做文件保存处理，只是简单的将文件基本信息返回，文件上...
php拖拽上传_前端页面文件拖拽上传模块js代码示例
weixin_39622217的博客
03-09 245
最近给卫生局做一个表格上传/可视化系统，算是小有成果。今天把项目中的文件拖拽上传模块分离出来，做了一个独立的小demo,并把相关代码打包上传到了我的github中，为了其他学习者和开发者提供拙见。由于代码中我的注释很详尽，所以具体逻辑实现及不介绍了，大家直接看代码及能明白。现在简单列一个功能清单和一些用到的知识点清单：模态框文件的批量上传使用formData API 封装数据 并通过ajax方法提...
php + js 实现拖拽上传 以及 复制粘贴上传图片
u013395223的博客
12-14 1296
php + js 实现拖拽上传 以及 复制粘贴上传图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值