Skip to content

Instantly share code, notes, and snippets.

@precious-ming

precious-ming/demo.html

Last active August 29, 2015 14:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save precious-ming/cdf0e41a51869a7d7564 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save precious-ming/cdf0e41a51869a7d7564 to your computer and use it in GitHub Desktop.
Download ZIP
Ajax拖动文件上传(Html5 drop file upload)
Raw
demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop file upload</title>
<style>
#dropdiv{
margin: 40px auto;
width: 900px;
height: 400px;
background-color: #ecf0f1;
border: 4px dashed #2c3e50;
padding: 10px;
}
#dropdiv h3{
margin-top:80px;
text-align: center;
}
#dropdiv img{
max-width: 200px;
border: 3px solid #fff;
margin: 5px;
max-height: 200px;
}
</style>
</head>
<body>
<div id="dropdiv">
<h3 id="msg">请将文件拖动到此区域或<a href="javascript:;" id="selectFiles">选择文件</a></h3>
</div>
<h3 id="progress">0</h3>
<input type="file" multiple accept="image/*" style="display:none" id="fileInput" onchange="upload(null,this.files)"/>
<script>
(function(){
var dd = document.getElementById("dropdiv");
var h3 = document.getElementById("msg");
var fileInput = document.getElementById("fileInput");
var selectFiles = document.getElementById("selectFiles");
var progress = document.getElementById("progress");
selectFiles.onclick = function(){
fileInput.click();
};
//拖动到层上面
dd.ondragover = function(event) {
dd.style.border = "4px dashed #e74c3c";
event.stopPropagation();
event.preventDefault();
};
//拖动到层上面然后离开
dd.ondragleave = function(event) {
dd.style.border = "4px dashed #2c3e50";
event.stopPropagation();
event.preventDefault();
};
//拖动到层上释放
dd.ondrop = upload;
function upload(event,f) {
dd.style.border = "4px dashed #2ecc71";
event.stopPropagation();
event.preventDefault();
var files = event.dataTransfer.files || f;
if(files.length > 0) {
for(var i = 0;i < files.length;i++) {
var file = files[i];
alert(file.type);
if(!file.type.match(/image.*/)) {
continue;
}
/*var msg = "fileSize:" + file.size + "byte<br/>";
msg += "Type:" + file.type + "<br/>";
msg += "lastModifiedDate:" + file.lastModifiedDate;
h3.innerHTML = msg;
*/
if(document.getElementById("msg")) {
dd.removeChild(document.getElementById("msg"));
}
var fileReader = new FileReader();
fileReader.onload = function(){
var img = document.createElement("img");
img.setAttribute("src",this.result);
dd.appendChild(img);
};
fileReader.readAsDataURL(file);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.status == 200) {
if(xmlHttp.readyState == 4) {
var result = xmlHttp.responseText;
alert(result);
}
}
};
xmlHttp.upload.onprogress = function(e){
if (e.lengthComputable){
var _progress = Math.round((e.loaded * 100) / e.total);
if (_progress <= 100){
progress.innerHTML = _progress + '%';
}
}
};
xmlHttp.open("post", "upload.do",true);
var formData = new FormData();
formData.append("userfile",file);
xmlHttp.send(formData);
}
}
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment