本案例页面的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()};
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。