簡(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í)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于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é)果的話,將ajax 中的參數(shù) async 改為 false,即為同順序執(zhí)行2014-05-05AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
本文整理了關(guān)于AJAX獲取服務(wù)器當(dāng)前時(shí)間的知識(shí),不會(huì)的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05用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-10AJAX 動(dòng)態(tài)獲取當(dāng)前時(shí)間(php)
利用AJAX動(dòng)態(tài)獲取當(dāng)前時(shí)間,客戶端time.php,服務(wù)器端time_check.php2009-11-11