반응형
파일을 업로드하기 전에 파일 확인 확인
서블릿에 이미지를 업로드하고 있습니다. 업로드 된 파일이 이미지인지 여부는 파일 헤더의 매직 넘버를 확인하여 서버 측에서만 확인합니다. 서블릿에 양식을 구축하기 전에 클라이언트 측에서 확장을 구현하는 방법이 있습니까? 키를 저장하는 업로드가 시작됩니다.
클라이언트 측에서 Javascript와 jQuery를 사용하고 있습니다.
업데이트 : 마침내 바이트를 읽고 이미지가 아닌 경우 업로드를 거부하는 서버 측 유효성 검사로 끝났습니다.
virus.exe의 이름을 virus.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를 사용하여 수행 할 수 있습니다 "원시"JavaScript에 익숙하고 최종 결과는 동일합니다.
더 많은 파일이 변경시 확인을 트리거하려는 경우 대신 다음 코드를 사용하십시오.
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, '\\.')그 기본 확장이 모든 문자와 일치하는 점없이 전달 될 수 있기 때문에 정규에 대한 점을이 탈출하는 것입니다.
짧게 유지하기 위해 오류 검사가 없습니다. 아마도 사용 사용하면 입력이 먼저 존재하고 확장 배열이 유효한지 확인할 것입니다!
$(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()"/>파일이 선택 확인하십시오
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>
입력 필드에서 원격 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 %까지 도달 할 수 있습니다.
요청 시도하십시오 (나에게 적합합니다)
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>
입력 유형 = "파일"을 사용하여 업로드 파일을 선택합니까? 속성을 사용하지 않는 이유는 무엇입니까?
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
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;
});
[TypeScript]
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;
});
accept입력 파일 유형에 사용할 수 있는 속성을 사용할 수 있습니다. MDN 문서 체크 아웃
<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');
}
이것이 jquery에서 수행되는 방법입니다.
$("#artifact_form").submit(function(){
return ["jpg", "jpeg", "bmp", "gif", "png"].includes(/[^.]+$/.exec($("#artifact_file_name").val())[0])
});
찾아보기 버튼과 파일의 유효성을 검사하려는 다음 코드를 사용하십시오.
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;
}
이것은 내 생각에 가장 좋은 솔루션이며 다른 것보다 훨씬 짧습니다.
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
반응형
'ProgramingTip' 카테고리의 다른 글
| bash 히스토리를 사용하여 이전 명령을 가져오고 복사 한 다음 '실행'하지만 명령이 주석 처리됨 (0) | 2020.10.15 |
|---|---|
| rails- 콘솔 출력을 파일로 리디렉션 (0) | 2020.10.15 |
| MySQL에서는 어디에서나 주석을 어떻게 제거 할 수 있습니까? (0) | 2020.10.15 |
| Postgres 오류 "파라미터"TimeZone "에 대한 잘못된 값 :"UTC "" (0) | 2020.10.15 |
| Objective-C의 속성에 블록을 저장하는 방법은 무엇입니까? (0) | 2020.10.15 |