簡(jiǎn)單實(shí)現(xiàn)ajax拖拽上傳文件
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í)有所幫助,也希望大家多多支持腳本之家。
- 基于bootstrap的上傳插件fileinput實(shí)現(xiàn)ajax異步上傳功能(支持多文件上傳預(yù)覽拖拽)
- AjaxUI:鼠標(biāo)拖拽
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- php+ajax實(shí)現(xiàn)圖片文件上傳功能實(shí)例
- jQuery Ajax文件上傳(php)
- 自己動(dòng)手打造ajax圖片上傳(網(wǎng)上沒(méi)有的)
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- ajax實(shí)現(xiàn)異步文件或圖片上傳功能
相關(guān)文章
jquery中的ajax如何返回結(jié)果而非回調(diào)方式即為同順序執(zhí)行
默認(rèn)ajax是異步的,也就是在未響應(yīng)到結(jié)果時(shí)不影響向下的執(zhí)行,如果非要返回結(jié)果的話(huà),將ajax 中的參數(shù) async 改為 false,即為同順序執(zhí)行2014-05-05
AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
本文整理了關(guān)于A(yíng)JAX獲取服務(wù)器當(dāng)前時(shí)間的知識(shí),不會(huì)的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05
淺談Ajax跨域Session和跨域訪(fǎng)問(wèn)
這篇文章主要介紹了Ajax跨域Session和跨域訪(fǎng)問(wèn)的相關(guān)問(wèn)題,以及需要注意的地方,這里推薦給大家2014-12-12
用ajax實(shí)現(xiàn)在單擊事件下加載一個(gè)DIV層的腳本
用ajax實(shí)現(xiàn)在單擊事件下加載一個(gè)DIV層的腳本...2007-11-11
有史以來(lái)最簡(jiǎn)單的AJAX回調(diào)庫(kù)
很多時(shí)候我們只要用到一些簡(jiǎn)單的Ajax功能,提供一些簡(jiǎn)單的回調(diào)而不需要很花哨的東西。然而現(xiàn)有的很多Ajax庫(kù)都很大,雖然功能很多但是我們很多時(shí)候根本就不需要用到他們,我就遇到過(guò)那樣的經(jīng)歷,所以我想弄一個(gè)很簡(jiǎn)單的Ajax回調(diào)函數(shù)來(lái)搞定。2008-10-10
AJAX 動(dòng)態(tài)獲取當(dāng)前時(shí)間(php)
利用AJAX動(dòng)態(tài)獲取當(dāng)前時(shí)間,客戶(hù)端time.php,服務(wù)器端time_check.php2009-11-11

