上传带有文件扩展名相应图标的文件

Question

我需要函数来获取文件扩展名并添加适当的图标来扩展文件。

var uploaded = '';
$('#dropzone-doc #files-doc').on('change', function() {
       uploaded = $(this).val(),
       ext = uploaded.split('.').pop(),
        if (ext === 'pdf') {
            $('#fileTumb').append("<img src='./images/pdf.svg' alt=''>")
        } else {
            console.log('not support')
        }
});

Answer 1

根据你的例子，这里有一个jsfiddle。基本上存在一些语法错误（缺少分号）和错误的多选择器语法。

let uploaded = '';
  $('#dropzone-doc, #files-doc').on('change', function() {
    uploaded = $( this ).val();
    ext = uploaded.split('.').pop();
    if (ext === 'pdf') {
      $('#fileTumb').append("<img src='./images/pdf.svg' alt=''>")
      console.log("yeah");
    } else{
          console.log('not support');
    }
 });

更新它需要一些工作：

js小提琴

$(function () {
    if (window.File && window.FileList && window.FileReader) {
        $("#files-doc").on('change', function (e) {
            var files = e.target.files,

                filesLength = files.length;
            for (var i = 0; i < filesLength; i++) {
                var f = files[i]
                var fileReader = new FileReader();
                fileReader.onload = (function (e) {
                    var file = e.target;
                    var filename = $('#files-doc').val();
                    var imgicon = getImgIcon(filename);
                    if (imgicon != null) {
                        $("<span class='pip-file'>" +
                            imgicon +
                        "<p class='fileThumb' class='fileTumb'></p>" +
                        "<br/><span class='remove-file'><img src='./images/close.svg' alt=''></span>" +
                        "<br/><span class='rename'><input type='text' placeholder='Rename'></span>" +
                        "</span>").insertBefore("#dropzone-doc");
                        $(".remove-file").click(function () {
                            $(this).parent(".pip-file").remove();
                            $('#files-doc').val("");
                        });
                    } else {
                        alert('pdf required')
                    }
                });
                fileReader.readAsDataURL(f);
            }
        });
    } else {
        alert("Your browser doesn't support to File API")
    }

    var uploaded = '';
    function getImgIcon(filename) {
        ext = filename.split('.').pop();
        if (ext === 'pdf')return "<img width='30px' src='https://ahmed22zxk.000webhostapp.com/logosam/images/pdf.svg' alt=''>";
        return null;
    }
});