Question

我有两个文本框。一个是普通文本框，另一个是'input type =“file”'

当我点击按钮时，我希望使用文本框值更新标签，并且href指向我附加到文件类型的任何内容。

如何使用jquery完成此操作。

谷歌搜索了很多，但没有找到任何答案

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

如何使用jquery检索文件类型

2 个答案: