Блог

Я довольно новичок в понимании Javascript, Jquery и PHP. На данный момент я потратил около 80 часов, работая над пониманием этого исправления, и я надеюсь получить некоторое представление. Я работаю с этой функцией перетаскивания изображений, и мне нужно отсортировать элементы изображения в объекте FileList в алфавитно-цифровом порядке по их локальному имени файла, чтобы они совпадали с организационной системой базы данных фотографий. Я понимаю, что объект FileList доступен только для чтения, поэтому я предполагаю, что это достигается путем добавления этих элементов в их собственный массив для сортировки или сравнения.

Используя этот код,

 files = e.dataTransfer.files;
newFiles = Array.from(files).map(({name}) => name);
            newFiles.sort();
    console.log(files);
    console.log(newFiles);
 

Я смог вставить имена файлов в их собственный массив, но я не уверен, как продолжить сравнение этого нового списка элементов с их исходным FileList аналогом для сортировки. Вывод. (Обратите внимание, что последние три элемента FileList объекта (файлы) возвращаются несортированными и newFiles , хотя они отсортированы, содержат только данные имени.)

Я пытался использовать этот .slice метод:

 files = [].slice.call(files);
 

Но, похоже, я не могу запустить код. Изображения загружаются как обычно, без сортировки.

То же самое относится и к этому методу:

 files = [...e.dataTransfer.files].sort();
 

Я также попытался использовать рекомендуемый код MDN:

 files.sort((a, b) => a.localeCompare(b, navigator.languages[0] || navigator.language, {numeric: true, ignorePunctuation: true}));
 

но когда я пытаюсь реализовать это исправление, консоль возвращает, что localeCompare не является функцией.

Я также изучал возможность использования natural compare lite Лаури Рудена и jsrender Бориса Мура, но я не понимаю, как реализовать эти плагины.

Я начал писать итератор, чтобы определить, можно ли сравнивать и сортировать два массива как таковые, и мне, честно говоря, просто интересно, на правильном ли я пути?

 for (i=0; i < files.length; i  ) {
                      if (files.name[i] === newFiles[i]) {
                 files.splice(i, 1, newFiles[i]) }
             else{i  ;
       }
 

У меня возникли некоторые проблемы с внутренней ошибкой сервера в PHP, но если обычный код работает с ошибкой на месте, может ли это быть чем-то, что мешает FileList сортировке объекта?

Вот скрипка с кодом. PHP закомментирован ниже HTML, поэтому код вообще не запускается, а iframe Javascript разделен на 3 раздела, разделенных комментариями. Я знаю, что этот пост длинный, и есть много внешних источников, но я хотел убедиться, что я был тщательным в своем объяснении. Если у вас есть какие-либо советы для начинающего веб-разработчика (кроме выхода ^_^;), Я был бы очень признателен! Заранее благодарю вас! 🙂

Спасибо за твой совет, Джерард! В итоге я нажал кнопку для сортировки фотографий с помощью многомерного массива на основе идентификатора после того, как фотографии были добавлены:

HTML:

 <div class="dontprint">
            <input TYPE="button" onclick="sortFunction()" id="sortButton" class="sortButton" value=" Sort ">
            <input TYPE="button" value=" Shortcut to Print! " onclick="printpage()" />
            <INPUT TYPE="button" onclick="history.go(0)" value=" Clear ">
        </div>
 

Javascript:

 /* ---------------------------Added to index.html as script tag------------------------ */
//Called on Button Click
function sortFunction() {

//Grab images, array them
const pulled = document.getElementsByClassName("postedImage");
imageObjects = Array.prototype.slice.call(pulled);
    
//Store current image ID amp; Image Source in their own Arrays
var imageIdArray = [];
var imageSrcArray = [];
   for (let i = 0; i < imageObjects.length; i  ) {
        imageSrcArray.push(imageObjects[i].currentSrc);
        imageIdArray.push(imageObjects[i].id);
        }  

//Adopt a multidimensional Array to associate Image ID with Image Source 
var multiArray = [];
   for (var i=0; i<imageIdArray.length amp;amp; i<imageSrcArray.length; i  )
       {multiArray[i] = [imageIdArray[i], imageSrcArray[i]];
            }

//Sort imageObjects (multiArray) alphanumerically
    multiArray.sort(function(a, b) {
        if(a[0] > b[0]) {return 1;}
        if (a[0] < b[0]) {return -1;}
            });

//Sort Image ID's
imageIdArray.sort();

//Change image name on page
   var currentName = document.getElementsByClassName('name');
   var currentLink = document.getElementsByClassName('postedImage');
       for (let i = 0; i < currentName.length; i  ) {
           var newerName = imageIdArray[i];
           currentName[i].innerHTML = newerName;
           }

//Change image on page
//(Caution: Shuffles image sources when button is clicked more than once. Unsure why.)
   for (let i = 0; i < currentLink.length; i  ) {
        var newLink = multiArray[i][1];
        currentLink[i].src = newLink;
        }
}

/*-----------------------------Update these parts in script.js--------------------------*/
uploadStarted:function(i, file, len){
            createImage(file);
            $.data(file).find('.name').text(file.name);
            //Give each file an ID representative of its name
            document.getElementById('sortId').id = file.name;
        },

        progressUpdated: function(i, file, progress) {
            $.data(file).find('.progress').width(progress);
            
        }
         
    });

//Gave the image an ID and a Class for easy grabbing
    var template = '<div class="preview">' 
                        '<span class="imageHolder">' 
                            '<img / id="sortId" class="postedImage">' 
                            '<span class="uploaded"></span>' 
                        '</span>' 
                        
                            '<div class="name"></div>' 
                            
                        '</div>' 
                    '</div>';
};
 

В случае, если кто-то знает, как исправить проблему, связанную с сортировкой многомерных массивов, я не хочу перетасовывать URL-адреса данных при каждом нажатии кнопки. Массивы обновляются разными URL-адресами изображений со страницы при каждом нажатии кнопки сортировки. Мне также интересно узнать, могут ли файлы Tif поддерживаться чем-то подобным, но я буду продолжать искать информацию!