在浏览器中预览客户端文件并上传
本案例页面的HTML页面代码部分相对比较简单，页面中使用一个表单来实现文件上传功能，当用户单击上传按钮时将该表单进行AJAX提交。使用一个h1元素显示标题文字“文件预览并上传”，使用一个div元素显示文件预览区域，使用一个submit按钮作为上传按钮，使用一个div元素显示“上传成功”文字
（另外，本例使用AJAX上传文件方式，同时为了实现文件上传功能，使用Firefox浏览器提供的file对象的getAsBinary方法与XMLHttpRequest对象的sendAsBinary方法，因此本例仅在Firefox浏览器中能够得到完全实现。在Chrome浏览器或Opera浏览器中，仅能够实现本案例中将文件从客户端计算机中拖放到浏览器中进行预览的功能）
效果如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件预览并上传示例</title>
<style type="text/css">
div[id^=show] {
border: 10px dashed #ccc;
width: 300px;
height: 300px;
margin-top:5px;
margin-bottom:5px;
resize:both;
overflow:auto;
}
div[id^=show]:hover{
border: 10px dashed #333;
}
div#main{
width:100%;
}
div#successLabel
{
color:Red;
}
</style>
</head>
<body>
<form id="form1" method="post" action="javascript: uploadAndSubmit();">
<h1>文件预览并上传</h1>
<div id="main">
<div id="show">
文件预览区
</div>
</div>
<input type="submit" value="上传" id="saveButton" disabled="disabled"/>
<div id="successLabel" />
</form>
</body>
</html>
var sendInformation = new Object();
function init(){
var dest = document.getElementById('show');
dest.addEventListener("dragover",function(ev){
ev.stopPropagation();
ev.preventDefault();
},false);
dest.addEventListener("dragend",function(ev){
ev.stopPropagation();
ev.preventDefault();
},false)
dest.addEventListener("drop",function(ev){
ev.stopPropagation();
ev.preventDefault();
var file = ev.dataTransfer.files[0];
var reader = new FileReader();
sendInformation.fileName = file.name;
var saveButton = document.getElementById("saveButton");
if(file.type.substr(0,5) == "image"){
reader.onload = function(event){
dest.style.background = 'url('+event.target.result+') no-repeat center';
dest.innerHTML = "";
}
reader.readAsDataURL(file);
sendInformation.content = file.getAsBinary();
sendInformation.fileType = 1;
saveButton.disabled ="";
}else if(file.type.substr(0,4) == "text"){
reader.readAsText(file);
reader.onload = function(event){
dest.innerHTML = "<pre>" + this.result + "</pre>";
sendInformation.content = this.result;
dest.style.background = "white";
}
saveButton.disabled = "";
sendInformation.fileType = 2;
}else{
dest.innerHTML = "暂不支持此类文件的预览";
dest.style.background = "white";
saveButton.disabled = "disabled";
sendInformation.fileType = 3;
}
document.getElementById("successLabel").innerHTML = "";
},false)
}
init();
function uploadAndSubmit(){
var xhr = new XMLHttpRequest();
xhr.open("POST","dragAndSaveBack.aspx?fileName=" +
encodeURI(sendInformation.fileName) + "&fileType=" +
sendInformation.fileType);
if(sendInformation.fileType == 1){
xhr.sendAsBinary(sendInformation.content);
}else if(sendInformation.fileType == 2){
xhr.send(sendInformation.content);
}
xhr.onreadystatechange = function(){
var result = xhr.responseText;
document.getElementById("show").innerHTML = "文件预览区";
document.getElementById("show").style.background = "white";
document.getElementById("successLabel").innerHTML = result;
document.getElementById("saveButton").disabled = "disabled";
if(xhr.readyState == 4){
if(result == "上传成功"){
document.getElementById("saveButton").value = "继续上传"
}else{
document.getElementById("saveButton").value = "重新上传"
}
}
}
}
document.ondragover = function(e){e.preventDefault()};
document.ondrop = function(e){e.preventDefault()};
