快捷導(dǎo)航

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

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

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

AJAX拖拽上傳功能實現(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;

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

您可能感興趣的文章:

相關(guān)文章

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