[英]How to detect corrupt very large image files with javascript and jquery-file-upload?
我在rails應用程序中使用jquery-file-upload,我需要防止上傳損壞的圖像,因為用戶試圖使用有效的文件擴展名上傳損壞的圖像文件。
想要使用javascrpt驗證客戶端,以避免在超過50 MB的大文件的服務器上進行驗證的長時間延遲。
我可以檢查文件類型,但是如何使用jquery / native javascript / jquery-file-upload可靠地驗證一個非常大的有效和未損壞的jpg或tif圖像?
$('form[id*=photo]').fileupload({
dataType: 'script',
pasteZone: null,
sequentialUploads: true,
formData: {fileupload: 'ajax'},
add: function(e, data) {
if($('#photo_id').val() == ""){
data.type = 'POST';
}else{
data.type = 'PUT';
data.url = "/photos/" + $('#photo_id').val();
}
if(this.id != "new_photo"){
data.type = 'PUT';
}
types = /(\.|\/)(jpe?g|tif|tiff)$/i;
file = data.files[0];
if( types.test(file.type) || types.test(file.name) ) {
data.context = $(tmpl("template-upload", file));
$('.upload').remove();
$('#progbar').append(data.context);
$('#control-group-progress').show();
data.submit();
} else {
alert("We're sorry but the file " + file.name + " is not in a supported tiff or jpg image file format. Please select a jpeg (jpg) or tiff file. Thanks!");
}
},
progress: function(e, data) {
if(data.context) {
progress = parseInt(data.loaded / data.total * 100, 10);
progress = parseInt(progress * 0.9, 10);
data.context.find('.bar').css('width', progress + '%');
data.context.find('.progress_percent').html(progress + "%");
}
},
always: function(e, data) {
data.context.find('.bar').css('width', '100%');
data.context.find('.progress_percent').html("100%");
}
});
您可以嘗試使用以下JavaScript代碼來驗證文件類型和文件大小
var uploadedImgType = $('#photo_id').val();
file = data.files[0];
if(uploadedImgType.match(/(?:jpeg|jpg|tif|tiff)$/) && (file.size/1000/1000 < 50)){
(Do your Stuff);
}else{
alert("We're sorry but the file " + file.name + " is not in a supported tiff or jpg image file format. Please select a jpeg (jpg) or tiff file. Thanks!");
}
其中file.size / 1000/1000 <50將檢查上傳文件的大小是否小於50MB。
嘗試這個
var getDataUrl = function (blob) {
var defer = $q.defer();
var reader = new FileReader();
reader.onload = function (e) {
defer.resolve(e.target.result);
};
reader.readAsDataURL(blob);
return defer.promise;
};
file = data.files[0];
getDataUrl(file).then(function (dataUrl) {
var uploadedImg = new Image();
uploadedImg.src = dataUrl;
if (uploadedImg.width && uploadedImg.height) {
// image is OK
} else {
// Image is corrupted
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.