Как получить тип файла с помощью jquery

Question

У меня есть два текстовых поля. Один является обычным текстовым полем, а другой «input type =" file "'

Когда я нажимаю на кнопку, я хочу, чтобы метка обновлялась с помощью значения текстового поля, а href указывала на то, что я привязал к типу файла.

Как это можно сделать с помощью jquery.

Гугл много, но din't найти ответ

Answer 1

Вот мое решение, которое работает в менее последних версиях браузеров Mozilla на основе, новые браузеры, которые также поддерживают стандарт W3C FileAPI, и плохие браузеры, такие как IE, что дон Не поддерживайте никого из этого.

var getMediaType = function (fileInput, fileIndex) { 
    var fileName; 
    if (!("files" in fileInput)) { // doesn't support standard or non-standard FileAPI 
    fileName = fileInput.value; 
    return guessMediaType(
      fileName.substr(fileName.lastIndexOf(".") + 1).toLowerCase() 
      ); 
    } 
    fileName = = file.name || file.fileName; // FileAPI: name, non-standard: fileName 
    var file = fileInput.files.item(fileIndex || 0), 
    mediaType = file.mediaType || // FileAPI way 
       file.getAsDataURL() 
       .split(",")[0] 
       .substr("data:".length) 
       .split(";")[0]; // non-standard way 

    if (!mediaType || mediaType === "application/octet-stream") { 
    mediaType = guessMediaType(
     fileName.substr(fileName.lastIndexOf(".") + 1).toLowerCase() 
    ); 
    } 

    return mediaType; 
}, 

formatTests = { 
    // Text/document formats 
    "text/plain"   : /^(?:te?xt$|readme)$/, // txt, text, readme 
    "text/html"    : /^html?$/, // html, htm 
    "application/xhtml+xml" : /^xht(?:ml|l)?$/, // xhtml, xhtm, xht 
    "application/xml"  : "xml", 
    "text/rtf"    : "rtf", 
    "application/pdf"  : "pdf", 
    "application/x-shockwave-flash" : "swf", // no idea where this would go 

    // Image formats 
    "image/png"  : /^a?png$/, // png, apng 
    "image/jpeg"  : /^jpe?g$/, // jpeg, jpg 
    "image/gif"  : "gif", 
    "image/svg+xml" : /^svgz?$/, // svg, svgz 
    "image/x-ms-bmp" : /^(?:bmp|dib)$/, // bmp, dib 
    "image/xbm"  : "xbm", 
    "image/vnd.microsoft.icon" : "ico", 

    // Video formats 
    "video/ogg"  : "ogv", 
    "video/mp4"  : /^(?:mp4|m4v|f4[vp])$/, // mp4, m4v, f4v, f4p 
    "video/x-flv"  : "flv", 
    "video/divx"  : "divx", 
    "video/x-matroska" : /^mk[vas]$/, // mkv, mka, mks 
    "video/3gpp"  : "3gp", 
    "video/3gpp2"  : "3g2", 

    // Audio formats 
    "audio/ogg"  : /^og[ga]$/, // ogg, oga 
    "audio/x-flac" : "flac", 
    "audio/x-speex" : "spx", 
    "audio/mp4"  : /^(?:m4a|f4[ab])$/, // m4a, f4a, f4b 

    // OpenDocument formats 
    "application/vnd.oasis.opendoc.text" : "odt", 
    "application/vnd.oasis.opendoc.presentation" : "odp", 
    "application/vnd.oasis.opendoc.spreadsheet" : "ods", 
    "application/vnd.oasis.opendoc.graphics" : "odg", 

    // Microsoft formats 
    "application/msword" : /^do[ct]$/, // doc, dot 
    "application/vnd.ms-excel" : /^xl[tas]$/, // xlt, xla, xls 
    "application/vnd.ms-powerpoint" : /^p(?:p[tsa]|ot)$/, // ppt, pot, pps, ppa 
    "application/vnd.openxmlformats-officedoc.wordprocessingml.document" : /^doc[xm]$/, // docx, docm 
    "application/vnd.openxmlformats-officedoc.presentationml.presentation" : "pptx", 
    "application/vnd.openxmlformats-officedoc.spreadsheetml.sheet" : "xlsx", 
    "application/vnd.openxmlformats-officedoc.wordprocessingml.template" : "dotx", 
    "application/vnd.openxmlformats-officedoc.spreadsheetml.template" : "xltx", 
    "application/vnd.openxmlformats-officedoc.presentationml.template" : "potx", 
    "application/vnd.openxmlformats-officedoc.presentationml.slideshow" : "ppsx" 

}, 

formats = [], 

guessMediaType = function (ext) { 
    var guessedType = "application/octet-stream", 
    i = formats.length, test; 
    while (i--) { 
     test = formatTests[formats[i]]; 
     if ((typeof test === "string" && ext === test) || 
      (test instanceof RegExp && test.test(ext))) 
     { 
      guessedType = formats[i]; 
      break; 
     } 
    } 
    return guessedType; 
}; 

for (formatTest in formatTests) { 
    if (formatTests.hasOwnProperty(formatTest)) { 
     formats.unshift(formatTest); 
    } 
} 

Используйте его в качестве такового:

getMediaType(document.getElementById("myFileInput")); 

Если вы хотите поддерживать несколько файлов, он также поддерживает второй, fileIndex, аргумент.

Редактировать: Ваше намерение ничего похожего на наличие графического изображения для типа файла? Если это так, вы можете просто сделать (только браузер Mozilla) <img src="moz-icon://value of file input here?size=16" />. Единственными поддерживаемыми размерами являются 16 и 32. Например:

var fileInput = document.getElementById("myFileInput"), 
fileTypeIcon = new Image(); 
fileTypeIcon.src = "moz-icon://" + fileInput.value + "?size=16"; 
// now append fileTypeIcon to any element in the document 

Answer 2

Я должен был сделать то же самое на днях. Вот код jQuery, который я использовал, используя ...

$("#filUpload").change(function() { 
    $("#hypViewLocalDoc").remove(); 
    var val = this.value.toLowerCase(); 

    if(val.length == 0) return; 

    if(val.substring(val.length - 3) != "pdf") { 
    alert("Only PDF Documents are Allowed"); 
    return; 
    } 

    var url = 'file:///' + encodeURI(val); 
    $(this).after('<a id="hypViewLocalDoc" href="' + url + '" target="_blank">Open</a>'); 
});