异步拖放文件——小实例

upload.html



<！——
若要更改此许可证标题，请在项目属性中选择许可标头。
要改变这个模板文件，选择工具模板|
并在编辑器中打开模板。
-->


待办事项提供标题



#箱{
宽度：150px；身高：150px；边框1px solid红；
}



在window.onload =函数（）{
VaR箱= document.getelementbyid（'box）；
box.ondragenter =功能（e）{
E.preventDefault（）；
}
box.ondraver =功能（e）{
E.preventDefault（）；
}
box.ondragleave =功能（e）{
E.preventDefault（）；
}
box.ondrop =功能（e）{
E.preventDefault（）；
var文件= e.datatransfer文件{ 0 }；
var =新的表单（表单）；
formdata.append（AA，文件）；

VaR XML = ajaxfunction（）；
Xml.open（后
Xml.send（表单）；
xml.onreadystatechange =函数（）{
如果（xml.readystate = = 4 { xml.status = = 200）
VaR xml.responsetext旗=；
console.log（标志）；
如果（标志= 1）{
/ /盒。innerHTML =上传成功；
警报（'upload成功）；
}
}
}
}


}




请拖动上传的文件







upload.php

复制代码代码如下所示：

< PHP

标题（内容类型：文本/ HTML；字符集= UTF-8）；

如果（is_uploaded_file（$ _files { } { }AA'tmp_name））{

move_uploaded_file（$ _files { } { }AA'tmp_name / 。Iconv（UTF-8

回声1；

}



xmlhttpreuest.js


ajaxfunction（）函数
{
VaR技术；
尝试
{
Opera 8 +，Safari / Firefox。
XMLHTTP =新的XMLHttpRequest（）；
}
捕捉（e）
{
互联网浏览器/浏览器
尝试
{
XMLHTTP =新的ActiveX对象（MSXML2. XMLHTTP ）；
}
捕捉（e）
{
尝试
{
XMLHTTP =新的ActiveX对象（微软。XMLHTTP ）；
}
捕捉（e）
{
警报（）您的浏览器不支持Ajax！；
返回false；
}
}
}
返回XMLHTTP；
}



以上是本文的全部内容，希望大家能喜欢。