我正在使用javascript的FileReader和我的自定义函数来读取JPG-JPEG图像,我的问题是如何通过下面的代码检测文件扩展名,如果文件不是JPG-JPEG则给用户错误:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
alert('image has read completely!');
}
reader.readAsDataURL(input.files[0]);
}
}
今天我遇到了一个有趣的事情,如FF File API和按类型分开的文件.好的,这里有一个小片段
if (!input.files[0].type.match('image.*')) {
window.alert("Select image please");
return;
}
它控制图像只读.但是例如doc文件和pdf呢？我找不到这个有用的例子,所以我希望你能分享一些片段.我有兴趣检测不同的文件类型但我如何使用JS及其type.match绑定来控制不同的文件类型？
这是基本代码
任何有用的评论是赞赏:)
我试图在base64字符串中获取图像的内容.
最初我是这样做的,readAsDataURL但是因为我想mimetype在客户端验证,似乎我必须使用readAsArrayBuffer,如同在本网站上指出的那样.
所以我以前工作得很好:
var reader = new FileReader();
reader.onloadend = function(event) {
var base64 = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
现在我添加了mimetype验证,我有以下内容:
var reader = new FileReader();
reader.onloadend = function(event) {
var realMimeType = getRealMimeType(reader);
if (realMimeType !== 'unknown') {
var emptyBufferArray = reader.result; //nothing
}else{
alert("Invalid mime type!");
}
};
reader.readAsArrayBuffer(event.target.files[0]); //<-- notice the difference
在线复制(不获取base64字符串)
我不久前做了这个画廊:https://jsfiddle.net/5e9L09Ly/
不要担心它不会上传任何东西.
我说你可以按文件大小排序,但我想按图像分辨率排序.问题是并非所有图像都会加载到页面上,所以我不知道它们的大小.
画廊本身非常基本,它要求一个目录,然后它将显示该目录中的所有图像和视频.
它现在只适用于chrome,只需单击顶部的浏览即可.浏览前的数字是选择目录时应显示或加载的图像数量.
我不知道如何处理这个问题......
我想到的一件事是这样的:
imgLoad.attr("src", url);
imgLoad.unbind("load");
imgLoad.bind("load", function() {
console.log(url+' size: '+(this.width + this.height));
});
问题是,它会加载它加载的每一个图像,如果你有很多图像,它会给硬盘和浏览器带来很大的压力,比方说你试图加载20k图像.
所以是的......任何建议都会很棒.
我不会在这里发布代码,因为它太多了,请查看小提琴.
我正在开发一个 angular 4 应用程序。我有一个 base64 编码的图像。我用 node.js 将它保存在文件系统中。
if (body.profilepic != "") {
let base64Data = body.profilepic.split(';base64,').pop();
fs.writeFile("out.png", base64Data, 'base64', function(err) {
if (!err) {
console.log("saved file")
}
});
}
问题是我无法检测到我正在保存的图像的文件类型。现在它只保存 png。
如何检测我收到的图像字符串的文件类型？
我得到的 base64 编码字符串是这样的：
data:image/png;base64,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
我有一个服务器脚本从 Javascript 接收上传的文件。
客户端，使用File对象（来自W3C File API）和类似于此行的代码：
if (file.type.indexOf("text") == 0) { ... }
可以检查文件类型。显然，这使用了MIME 类型（返回这些字符串）。
在我通过 SO 的旅程中，我冒险遇到了这个有价值的贡献者，他坚持认为 MIME 类型是无用的。
MIME 类型在文件上传情况下是否确实基本上没有用，因此应该在服务器端进行任何类型检查？
我在Angular JS中使用库Angular File Uploader。这filters就是允许将文件类型设置为上载的方式。我这样做像：
uploader.filters.push({
name: 'imageFilter',
fn: function (item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|doc|txt|docx|xml|pdf|djvu'.indexOf(type) !== -1;
}
});
问题是用户可以更改扩展文件，例如，更改*.exe为*.pdfAngular Uploader并将其添加到队列上传之后。
以及如何在模板中显示信息，PDF和txt文件在哪里？
这是使用Rails 5和ruby-filemagic.目前我正在将上传的图像保存到我的数据库中,除了它的mime类型.我的控制器中有这个代码
def create
@person = Person.new(person_params)
if @person.image
cur_time_in_ms = DateTime.now.strftime('%Q')
file_location = "/tmp/file#{cur_time_in_ms}.ext"
File.binwrite(file_location, @person.image.read)
fm = FileMagic.new(FileMagic::MAGIC_MIME)
@person.content_type = fm.file(file_location, true)
end
if @person.save
redirect_to @person
else
# This line overrides the default rendering behavior, which
# would have been to render the "create" view.
render "new"
end
end
困扰我这种方法的事情是,我必须在确定其mime类型之前将文件写入文件系统.这似乎很浪费.如何在不先创建文件的情况下找出mime类型？
编辑:为了回答给出的答案,我重新安排了一些事情,但是现在"content_type"变成了"application/x-empty",即使我上传了一个有效的png文件.这是代码
if @person.image
cur_time_in_ms = DateTime.now.strftime('%Q')
file_location = "/tmp/file#{cur_time_in_ms}.ext"
File.binwrite(file_location, @person.image.read)
file = File.open(file_location, "rb")
contents = file.read
# Scale image appropriately
#img = Magick::Image::read(file_location).first
@person.content_type …我有一个这样的表格:
<form method=post src=upload enctype="multipart/form-data">
<input name="img1" id="img1" type="file">
<input type="submit" value="Upload">
</form >
请问如何使用javascript验证此表单,以便只上传jpg文件.谢谢阅读.
文件输入在 chrome 或 firefox 中为同一文件提供不同的 Mimetype。我有一个要上传的 wav 文件，chrome 说它是，audio/wav而 firefox 检测到audio/x-wav。
我知道这两个 mimetype 非常相似（x-代表non-standard），但是为什么在这种情况下它们的处理方式不同？
这里有一个小提琴来说明这一点：https : //jsfiddle.net/r9ae0zfd/。这是我用于此示例的 WAV 文件：https : //freesound.org/people/zagi2/sounds/391828/。
最后，我想要的行为是.wav从我的计算机（客户端）获取文件并通过 HTTP 将其发送到我的服务器，audio/wav而不管浏览器如何。
对此有一个后续问题：如何协调这种行为？
我有这样的文件字段：
<input type="file" name="pic" accept="image/*">
当我单击并选择文件时它工作正常，但当我将文件拖放到其中时它接受所有类型的文件。
任何想法 ？
仅供参考：我已经通过添加服务器端验证解决了这个问题。
我需要从服务器上的 url 图像中找出文件类型而不检查扩展名，但我不知道如何在不将图像放入“输入”的情况下执行此操作，如下所示：
<input type="file" id="upload_file" accept="image/*|audio/*|video/*"/>
<input type="submit" onclick="sumbit()"/>
<script type="text/javascript">
function sumbit(){
var file_Element = document.getElementById("upload_file")
alert(file_Element.files[0].type);
//alert: image/png
}
<script>
我知道“.type”仅适用于文件对象，那么如何将 url 图像转换为像 google 徽标图像这样的对象： https: //www.google.ca/images/branding/googlelogo/1x/ googlelogo_color_272x92dp.png。我需要使用 ajax/flilereader 吗？如果是这样，怎么办？
