반응형
파일 업로드 전 파일 확장명 확인
저는 서블릿에 이미지를 업로드 하고 있습니다.업로드된 파일이 이미지인지 여부의 검증은 파일 헤더의 매직넘버를 확인하여 서버측에서만 수행됩니다.서블릿에 양식을 제출하기 전에 클라이언트 측에서 확장자를 확인할 수 있는 방법이 있습니까?입력하면 바로 업로드가 시작됩니다.
저는 클라이언트 쪽에서 자바스크립트와 jQuery를 사용하고 있습니다.
업데이트: 마침내 바이트를 읽고 이미지가 아닌 경우 업로드를 거부하는 서버측 검증을 받았습니다.
파일 확장자만 확인할 수 있지만 바이러스 이름을 쉽게 바꿀 수 있습니다.바이러스 jpg로 이동하여 검증을 "통과"합니다.
파일 확장명을 확인하고 유효한 확장명 중 하나를 충족하지 못할 경우 중단하는 코드는 다음과 같습니다. (잘못된 파일을 선택하고 제출하면 경고가 실행 중으로 표시됩니다.)
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}<form onsubmit="return Validate(this);">
File: <input type="file" name="my file" /><br />
<input type="submit" value="Submit" />
</form>참고로, 코드를 사용하면 파일을 선택하지 않고도 전송할 수 있습니다...필요한 경우 라인을 제거합니다.if (sFileName.length > 0) {그리고 어소시에이트 클로징 브라켓입니다 코드는 의 유효성을 합니다.코드는 이름에 관계없이 양식에 입력된 파일의 유효성을 검사합니다.
이것은 적은 줄로 jQuery로 할 수 있지만, 저는 "raw" 자바스크립트에 충분히 편안하고 최종 결과는 같습니다.
더 많은 파일이 있거나 양식 제출뿐 아니라 파일 변경 시 검사를 트리거하려면 대신 다음 코드를 사용합니다.
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />파일 확장자가 잘못되면 경고를 표시하고 입력을 재설정합니다.
기존 답변 중 어떤 것도 요청의 단순성을 충분히 고려할 수 있을 정도로 간결해 보이지 않았습니다.주어진 파일 입력 필드에 집합에서 확장자가 있는지 확인하는 작업은 다음과 같이 수행할 수 있습니다.
function hasExtension(inputID, exts) {
var fileName = document.getElementById(inputID).value;
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}
(서 ( 서))를 사용할 수 .upload. id파일 입력):
if (!hasExtension('upload', ['.jpg', '.gif', '.png'])) {
// ... block upload
}
또는 jQuery 플러그인으로서:
$.fn.hasExtension = function(exts) {
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}
사용 예시:
if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
// ... block upload
}
.replace(/\./g, '\\.')와 일치하지 될 수 합니다. regexp다
이것들을 짧게 유지하기 위해 이것들을 확인하는 것은 오류가 없습니다. 아마도 그것들을 사용하면 입력이 먼저 존재하고 확장자 배열이 유효한지 확인할 것입니다!
$(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase(),
regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");
if (!(regex.test(val))) {
$(this).val('');
alert('Please select correct file format');
}
});
});
여기에 온 이유는 여기에 있는 어떤 답도...시적인:
function checkextension() {
var file = document.querySelector("#fUpload");
if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}<input type="file" id="fUpload" onchange="checkextension()"/>업로드 파일을 선택할 때 입력 유형="file"을 사용합니까?그렇다면 수락 속성을 사용하지 않는 이유는 무엇입니까?
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
파일이 선택되었는지 여부를 확인합니다.
if (document.myform.elements["filefield"].value == "")
{
alert("You forgot to attach file!");
document.myform.elements["filefield"].focus();
return false;
}
파일 확장자를 확인합니다.
var res_field = document.myform.elements["filefield"].value;
var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
if (res_field.length > 0)
{
if (allowedExtensions.indexOf(extension) === -1)
{
alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
return false;
}
}
이 예가 마음에 듭니다.
<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />
<script language="javascript" type="text/javascript">
function ValidateFileUpload(Source, args) {
var fuData = document.getElementById('<%= fpImages.ClientID %>');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
// There is no file selected
args.IsValid = false;
}
else {
var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
args.IsValid = true; // Valid file type
FileUploadPath == '';
}
else {
args.IsValid = false; // Not valid file type
}
}
}
</script>
확장을 확인하는 것보다 밈 유형으로 시도하는 것이 더 좋습니다.왜냐하면 때때로 파일은 파일 없이 존재할 수 있으며 리눅스 또는 유닉스 시스템에서 매우 잘 작동하기 때문입니다.
따라서 다음과 같은 것을 시도해 볼 수 있습니다.
["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1
아니면
["image/jpeg", "image/png", "image/gif"].includes(file.type)
입력 필드에서 원격 URL을 테스트해야 하는 경우 관심 있는 유형을 사용하여 간단한 정규식을 테스트해 볼 수 있습니다.
$input_field = $('.js-input-field-class');
if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
$('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
return false;
}
이렇게 하면 .gif, .jpg, .jpeg, .tiff 또는 .png로 끝나는 모든 것이 캡처됩니다.
Twitter와 같은 일부 인기 사이트는 이미지 끝에 크기 속성을 추가한다는 것에 유의해야 합니다.예를 들어, 다음은 유효한 이미지 유형임에도 불구하고 이 테스트에 실패합니다.
https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large
그렇기 때문에 완벽한 해결책은 아닙니다.하지만 약 90%까지 갈 수 있을 겁니다.
해보세요 (Works for me)
function validate(){
var file= form.file.value;
var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
if(!file.match(reg))
{
alert("Invalid File");
return false;
}
}<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>
사용할 수 있습니다.accept입력 파일 형식에 사용할 수 있는 특성입니다.MDN 문서 체크아웃
찾아보기 단추 및 파일 확장명의 유효성을 검사하려면 다음 코드를 사용합니다.
function fileValidate(){
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file in .pdf extension ");
return false;
}
Array.prototype.some()을 통한 최근의 또 다른 예.
function isImage(icon) {
const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
return ext.some(el => icon.endsWith(el));
}
console.log(isImage('questions_4234589.png'));
console.log(isImage('questions_4234589.doc'));여기 jQuery를 사용한다고 가정할 때 더 재사용 가능한 방법이 있습니다.
라이브러리 함수(jQuery 필요 없음):
function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
if (required == false && stringToCheck.length == 0) { return true; }
for (var i = 0; i < acceptableExtensionsArray.length; i++) {
if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
}
return false;
}
String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }
String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }
페이지 기능(jQuery(거의 필요 없음) 필요):
$("[id*='btnSaveForm']").click(function () {
if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
alert("Photo only allows file types of PNG, JPG and BMP.");
return false;
}
return true;
});
[타입스크립트]
uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];
// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
return val === uploadedFileType;
});
이것이 jquery에서 하는 방법입니다.
$("#artifact_form").submit(function(){
return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
});
우리는 그것을 제출할때 확인하거나 그 제어의 변경 이벤트를 할 수 있습니다.
var fileInput = document.getElementById('file');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpeg|\.JPEG|\.gif|\.GIF|\.png|\.PNG)$/;
if (filePath != "" && !allowedExtensions.exec(filePath)) {
alert('Invalid file extention pleasse select another file');
fileInput.value = '';
return false;
}
배열 사용
유효한 확장자 배열에 file-extensions/mimeType을 모두 추가합니다.
const validExtensions = ["image/jpg", "image/jpeg", "image/png", "image/gif"];
const isValidExtension = validExtensions.indexOf(file.mimetype) > -1;
console.log(isValidExtension);
<script type="text/javascript">
function file_upload() {
var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
if (imgpath == "") {
alert("Upload your Photo...");
document.file.word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
document.form.word.focus();
return false;
}
}
}
function Doc_upload() {
var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
if (imgpath == "") {
alert("Upload Agreement...");
document.file.word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "txt" || filext == "pdf" || filext == "doc") {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload File with Extension ' txt , pdf , doc '");
document.form.word.focus();
return false;
}
}
}
</script>
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />필요한 파일 형식이 포함된 배열을 만들고 jQuery의 $.inArray()를 사용하여 배열에 파일 형식이 있는지 확인할 수 있습니다.
var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
// Given that file is a file object and file.type is string
// like "image/jpeg", "image/png", or "image/gif" and so on...
if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
console.log('Not an image type');
}
제 생각에는 이것이 가장 좋은 해결책이며, 다른 해결책들보다 훨씬 짧습니다.
function OnSelect(e) {
var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;
if (!isAcceptedImageFormat) {
$('#warningMessage').show();
}
else {
$('#warningMessage').hide();
}
}
이 경우 다음 설정을 사용하여 Kendo Upload 컨트롤에서 함수를 호출합니다.
.Events(e => e.Select("OnSelect")).
언급URL : https://stackoverflow.com/questions/4234589/validation-of-file-extension-before-uploading-file
반응형
'programing' 카테고리의 다른 글
| Build in Docker에서 환경 변수를 설정하는 방법 (0) | 2023.09.20 |
|---|---|
| Symfony 2에서 데이터베이스 보기에 대한 엔티티(docrine) 설정 방법 (0) | 2023.09.20 |
| OnclientClick과 OnClick이 동시에 작동하지 않습니까? (0) | 2023.09.15 |
| WordPress 설명이 있는 사용자 지정 게시 유형 아카이브 (0) | 2023.09.15 |
| Spring boot 버전을 2.1.6에서 Spring boot 2.4로 마이그레이션하는 동안 following 오류 발생 (0) | 2023.09.15 |