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。基本上有一些语法错误（缺少分号）和错误的multiple-selector语法。

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');
    }
 });

更新它需要一些工作：

jsFiddle

$(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;
    }

});

上载带有适当图标的文件扩展名

1 个答案: