ajax 文件拖拽上传

╰半夏微凉° 2022-07-19 06:00 247阅读 0赞

*   *  客户端
     *  服务器端

## 客户端 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style> #filePost{ width: 300px; height: 300px; border: 1px #F00 solid; } </style>
    </head>
    <body>
    <div id="filePost" ondrop="drop(event)"></div>
    <script> //第一步 清除 默认 浏览器对图片拖拽的处理（浏览器会展示图片） document.ondrop=function(event){ event.preventDefault(); }; document.ondragover=function(event){ event.preventDefault(); }; document.ondragenter=function(event){ event.preventDefault(); }; //第二步 给div设置 ondrop 事件 function drop(event){ var files=event.dataTransfer.files; if(files.length==0){ return false; } if(!files[0].type.match(/image*/)){ alert("不是图片") return false; } var xhr=new XMLHttpRequest(); xhr.open("post","upload.php",true); var formData=new FormData(); formData.append('mypic',files[0]); xhr.send(formData); } </script>
    </body>
    </html>

## 服务器端 ##

<?php
    /** * Created by PhpStorm. * User: Administrator * Date: 2016/7/23 * Time: 10:51 */
    if(!empty($_FILES["mypic"])){
        move_uploaded_file($_FILES["mypic"]["tmp_name"],$_FILES["mypic"]["name"]);
    }
    ?>

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5拖拽文件上传

上传文件 HTML5新增了文件API,提供客户端本地操作文件的可能. 我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类

淩亂°似流年/ 2023年01月01日 06:56/ 0 赞/ 160 阅读

相关 html5学习(文件拖拽上传)

> html5文件拖拽上传,有图有代码！文件拖拽的核心代码不多，如下可做参考： divNode.ondrop = function(e) { e.pre

淩亂°似流年/ 2022年12月31日 02:25/ 0 赞/ 147 阅读

相关 java 拖拽上传_Java swing怎么实现上传文件并支持拖拽上传

展开全部你这个复杂了，我稍微说说吧。进度条稍微简单点，你就去看看Oracle的tutorial就行了，记得运用科学(或3231313335323631343130323

深碍√TFBOYSˉ_/ 2022年11月02日 11:46/ 0 赞/ 408 阅读

相关 ASP.NET MVC文件上传、文件拖拽上传demo

原文：[http://www.codeproject.com/Articles/833159/Uploading-Image-by-File-Browsing-Dragging

迈不过友情╰/ 2022年08月13日 13:58/ 0 赞/ 269 阅读

相关拖拽上传图片--文件

应用upload.js 拖拽上传开始 document.addEventListener("drop",function(e){ //拖离

港控/mmm°/ 2022年07月26日 11:20/ 0 赞/ 251 阅读

相关 ajax 文件拖拽上传

客户端服务器端客户端 <!DOCTYPE html> <html lang="en"> <head>

╰半夏微凉°/ 2022年07月19日 06:00/ 0 赞/ 248 阅读

相关使用dropzone实现文件拖拽上传功能

![70][] ![70 1][] 前端代码，关于dropzone的配置我写在注释里了 <html> <head> <meta chars

川长思鸟来/ 2022年05月25日 09:10/ 0 赞/ 264 阅读

相关 JavaScript 实现拖拽文件进行ajax上传

预防以后需要，自己手写了一个拖拽文件上传，话不多，效果图 ![70][] html 部分： <div id="div" ondrop="drop(event)

今天药忘吃喽~/ 2022年05月17日 09:58/ 0 赞/ 214 阅读

相关 Dropzone.js 使用指南（文件拖拽上传）

先看一下预览图效果，然后下边有关于 Dropzone.js 的官方文档，很详细的一篇文档官方文档：[http://www.dropzonejs.com/][http_www

古城微笑少年丶/ 2021年11月06日 00:34/ 0 赞/ 622 阅读

相关 electron 拖拽上传文件

1、因为electron集成了node,故可以使用node的方式来对文件操作代码示例: //引入node模块 const fs=require('fs')

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:49/ 0 赞/ 1029 阅读