Javascript拖放文件，然后排序

Question

我正在尝试按名称对文件资源管理器中提取的文件进行排序，它们在加载时排序，如何使用下面的代码按名称对它们进行排序？

    (function() {

    // getElementById
    function $id(id) {
        return document.getElementById(id);
    }



    // output information
    function Output(msg) {
        var m = $id("messages");
        m.innerHTML = msg + m.innerHTML;
    }


    // file drag hover
    function FileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }


    // file selection
    function FileSelectHandler(e) {

        // cancel event and hover styling
        FileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        for (var i = 0, f; f = files[i]; i++) {
            ParseFile(f);
        }

    }


    // output file information
    function ParseFile(file) {



        // display an image
        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                Output(
                    "<p align=center><strong>" + file.name + ":</strong><br />" +
                    '<img src="' + e.target.result + '"></p>'

                );
            }
            reader.readAsDataURL(file);

        }


        // display text
        if (file.type.indexOf("text") == 0) {
            var reader = new FileReader();
            reader.onload = function(e) {
                Output(
                    "<p><strong>" + file.name + ":</strong></p><pre>" +
                    e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
                    "</pre>"
                );
            }
            reader.readAsText(file);
        }


    }


    // initialize
    function Init() {

        var fileselect = $id("fileselect"),
            filedrag = $id("filedrag"),
            submitbutton = $id("submitbutton");

        // file select
        fileselect.addEventListener("change", FileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", FileDragHover, false);
            filedrag.addEventListener("dragleave", FileDragHover, false);
            filedrag.addEventListener("drop", FileSelectHandler, false);
            filedrag.style.display = "block";

            // remove submit button
            submitbutton.style.display = "none";
        }

    }

    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
        Init();
    }




})();

此代码拖放我的程序中的文件并加载它们，但不按字母顺序排序，用下面的代码对它们进行排序的最佳方法是什么？

Answer 1

   var files;

(function() {

    // getElementById
    function $id(id) {
        return document.getElementById(id);
    }


    // output information
    function Output(msg) {
        var m = $id("messages");
        m.innerHTML = msg + m.innerHTML;
    }


    // file drag hover
    function FileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }


    // file selection
    function FileSelectHandler(e) {

        // cancel event and hover styling
        FileDragHover(e);

        // fetch FileList object
        var files = e.target.files || e.dataTransfer.files;

        // process all File objects
        for (var i = 0, f; f = files[i]; i++) {
            ParseFile(f);
        }

    }




    // output file information
    function ParseFile(file) {
        // display an image
        var basename = file.name.substring(0,file.name.length-4);
        files.push("<div style=\"width: 100%; overflow: hidden;\"><div style=\"width: 600px; float: left;\">" + 
                    "<strong>" + basename + ".pdf:</strong><br />" +
                    '<iframe src="\\\\sovarchpri01\\d$\\1000Sunrise\\Process\\stage\\' + basename +".pdf#view=fit" + '"height="75%" width="500px"></iframe></p>' +
                    "</div><div style=\"margin-left: 620px;\">" + 
                    "<strong>" + basename + ".png:</strong><br />" +
                    "<img src=\"\\\\sovarchpri01\\d$\\Fleissner\\ORG_5535_Documents\\" + basename + ".png\" height=\"75%\" width=\"500px\">" +
                    "</div> ");
    }

    function sortFiles() {
        files.sort().reverse();
        for (var i = 0; i < files.length; ++i) {
            Output(files[i]);
        }
    }

    function resetWindow(){
        window.location.reload(true)
    }

    // initialize
    function Init() {

        var fileselect = $id("fileselect"),
            filedrag = $id("filedrag"),
            submitbutton = $id("submitbutton"),
            sortbutton = $id("sortbutton"),
            resetbutton = $id("resetbutton")
            resetbutton2 = $id("resetbutton2");;

        files = new Array();    
        // file select
        fileselect.addEventListener("change", FileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", FileDragHover, false);
            filedrag.addEventListener("dragleave", FileDragHover, false);
            filedrag.addEventListener("drop", FileSelectHandler, false);
            filedrag.style.display = "block";

            // remove submit button
            submitbutton.addEventListener("click", sortFiles , false); //style.display = "none";

            sortbutton.addEventListener("click", sortFiles , false);
            resetbutton.addEventListener("click", resetWindow , false);
            resetbutton2.addEventListener("click", resetWindow , false);

        }

    }

    // call initialization file
    if (window.FileReader) {
        Init();
    }


})();