在 JavaScript 中按名称拖放排序文件

Question

我想按名称对文件进行排序，然后处理下一个代码。以下是我上传的文件名：DSC08703-3.jpg、DSC08701-2.jpg、DSC08704-4.jpg

我在下面也提到了一个技巧。

$('#file').change(function () {
        var pic1="";
        var count=1;
        var Allowedimages=0;
        var uploadedcount=0;    
        filesup = event.target.files;
        if (this.files.length > 0) {
            haveToUpload=this.files.length;
            $.each(filenames, function (i, v) {
                var reader = new FileReader();
                remainToUpload = parseInt(haveToUpload)-parseInt(i);
                var proceedImg = remainToUpload;
                reader.onload = function (e) {
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function () {
                    var canvas = document.createElement("canvas");
                    var value = 100;
                    var newsize=0;                    

                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var pic1=canvas.toDataURL("image/jpeg",0.80);
                        var x=1;
                        
                        while (x <= 60) {
                            var filebd=$('#fileBD'+x).val();
                            if(filebd==NoImageSrc) {
                               break;
                            }
                            x++;
                        }
                        
                        $('#ima'+x).attr('src', BASEURL+'/images/bx_loader.gif');                            
                        $('#fileBD'+(x)).val(pic1); 
                        var imagesize=$('#oldimagesvalue').val();
                        $('#oldimagesvalue').val(parseInt(imagesize)+1);
                    }
                };
                reader.readAsDataURL(this);
            });
        }
    });

我尝试了以下解决方案但没有用。

var filenames = [];
filenames.push(this.files);
filenames.sort();
for(var i=0; i<filenames.length; i++){
for(var j=0; j<filenames[i].length; j++){
     //REST CODE HERE
 }
}

Answer 1

首先，仔细检查 this.files 不是 File 接口数组 (https://developer.mozilla.org/en-US/docs/Web/API/File)

如果是这种情况，您必须像这样映射文件名：

var filenames = this.files.map(x => x.name);

至于对字符串数组进行排序：

var ascending = (a, b) => a > b ? 1 : -1;
filenames.sort(ascending);
// console.log(filenames);

Answer 2

从图像名称中获取数字并将该数字用作框值。

$.each(this.files, function (i, v) {
 var tno = 0;
 var parts = v.name.split("-");
 var result = parts[parts.length - 1];
 var tno = result.toString().split(".")[0];
    var x=1;//parseInt(count)+parseInt(i)+parseInt(1);
    var xx = 1;
    if(tno>0)  x = tno;
    else x = xx;

    x++;
    xx++;
]);

在 JavaScript 中按名称拖放排序文件

Drag & Drop sort files by their name in JavaScript

javascript

jquery

drag-and-drop