簡(jiǎn)單實(shí)現(xiàn)ajax拖拽上傳文件

更新時(shí)間：2018年04月18日 11:53:54 作者：清風(fēng)白水

這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)ajax拖拽上傳文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

AJAX拖拽上傳功能實(shí)現(xiàn)，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .box {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  text-align: center;
  line-height: 300px;
  font-size: 40px;
 }
 </style>
</head>

<body>
 <div class="box">+</div>

 <script>
 var box = document.querySelector('.box');

 box.ondragover = function (e) {
  e.preventDefault();
 }
 box.ondrop = function (e) {
  console.log(e.dataTransfer)
  e.preventDefault();
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
   console.log(xhr.responseText)
  }
  }
  xhr.open('POST', './server.php', true);

  var formdata = new FormData();
  formdata.append('pic', e.dataTransfer.files[0]);
  formdata.append('name', 'luyao');
  xhr.send(formdata);

 }
 </script>
</body>

</html>

//server.php

<?php
 $rand = rand(1,1000).'.jpg';
 move_uploaded_file($_FILES['pic']['tmp_name'], './uploads/'.$rand);
 echo '/uploads/'.$rand;

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

理解jquery ajax中的datatype屬性選項(xiàng)值
jquery中ajax的dataType屬性用于指定服務(wù)器返回的數(shù)據(jù)類(lèi)型，如果不指定，jQuery 將自動(dòng)根據(jù)HTTP包MIME信息來(lái)智能判斷，如果datatype選項(xiàng)不填寫(xiě)的話(huà)，會(huì)將返回的數(shù)據(jù)當(dāng)成字符串處理。
2015-10-10
asp簡(jiǎn)單的ajax留言板
asp簡(jiǎn)單的ajax留言板...
2006-09-09
使用原生ajax處理json字符串的方法
JSON的全稱(chēng)是 Javascript Object Notation（javascript對(duì)象表示法），是基于javascript對(duì)象字面量。這篇文章主要介紹了使用原生ajax處理json字符串的相關(guān)資料,需要的朋友可以參考下
2016-10-10
ajax 異步上傳帶進(jìn)度條視頻并提取縮略圖
這篇文章主要介紹了ajax 異步上傳帶進(jìn)度條視頻并提取縮略圖的相關(guān)資料,需要的朋友可以參考下
2015-09-09
layui Ajax請(qǐng)求給下拉框賦值的實(shí)例
今天小編就為大家分享一篇layui Ajax請(qǐng)求給下拉框賦值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Ajax基礎(chǔ)詳解教程(一)
ajax技術(shù)在前端應(yīng)用開(kāi)發(fā)中經(jīng)常會(huì)用到，是必須要掌握的知識(shí)。下面腳本之家小編給大家?guī)?lái)了Ajax基礎(chǔ)詳解教程(一)，感興趣的朋友跟著一起學(xué)習(xí)吧
2016-06-06
利用ajax提交form表單到數(shù)據(jù)庫(kù)詳解(無(wú)刷新)
這篇文章主要給大家介紹了關(guān)于利用ajax提交form表單到數(shù)據(jù)庫(kù)(無(wú)刷新)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-02-02
jsp+ajax實(shí)現(xiàn)無(wú)刷新上傳文件的方法
這篇文章主要介紹了jsp+ajax實(shí)現(xiàn)無(wú)刷新上傳文件的方法,結(jié)合實(shí)例形式分析了ajax無(wú)刷新上傳文件及jsp后臺(tái)處理的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
Ajax實(shí)現(xiàn)步驟和原理解析
Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，Ajax的工作原理相當(dāng)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶(hù)操作與服務(wù)器響應(yīng)異步化，這篇文章主要介紹了Ajax實(shí)現(xiàn)步驟和原理,需要的朋友可以參考下
2023-11-11
Ajax——異步檢查用戶(hù)名是否存在示例
在任何網(wǎng)站注冊(cè)用戶(hù)的時(shí)候，都會(huì)檢查用戶(hù)是否已經(jīng)存在，有了Ajax，有了異步交互，當(dāng)用戶(hù)輸完用戶(hù)名繼續(xù)填寫(xiě)其他信息的時(shí)候，Ajax就將信息發(fā)到了服務(wù)器去檢查該用戶(hù)名是否已經(jīng)被注冊(cè)了
2013-07-07