Javascript 如何使用jquery检索文件类型
我有两个文本框。一个是普通文本框,另一个是“输入类型=文件” 当我点击按钮时,我想用文本框值更新标签,它的href指向我附加到文件类型的任何内容 如何使用jquery实现这一点Javascript 如何使用jquery检索文件类型,javascript,jquery,Javascript,Jquery,我有两个文本框。一个是普通文本框,另一个是“输入类型=文件” 当我点击按钮时,我想用文本框值更新标签,它的href指向我附加到文件类型的任何内容 如何使用jquery实现这一点 谷歌搜索了很多,但没有找到任何答案。这是我的解决方案,它适用于较新的基于Mozilla的浏览器,也支持W3C FileAPI标准的较新浏览器,以及像IE这样不支持这些东西的糟糕浏览器 var getMediaType = function (fileInput, fileIndex) { var fileName;
谷歌搜索了很多,但没有找到任何答案。这是我的解决方案,它适用于较新的基于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浏览器中输入文件的唯一值?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
前几天我不得不做同样的事情。这是我最后使用的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>');
});
请澄清你的问题。要用textbox值更新的标签,它的href指向我附加到文件类型的任何内容都没有意义。你是说你想点击一个按钮,上传文件,然后显示上传文件的链接吗?我无法理解你问题的最后部分,所以我只能给你我的getMediaType函数,但没有你想如何使用它的例子。正如诺亚所问,请澄清你的问题。