반응형
파일을 선택할 때 업로드 양식을 자동 제출하려면 어떻게합니까?
간단한 파일 업로드 양식이 있습니다. 파일을 선택할 때 자동으로 제출하려면 어떻게합니까? 사용자가 제출 버튼을 클릭하지 않기를 바랍니다.
파일 입력시 단순히 폼의 submit메소드 를 호출 할 수 있습니다 onchange.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
file변경 사항에 대해 자동으로 양식을 제출 하도록 -input에 지시하십시오.
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>이 솔루션의 장점 :
ids 없이 작동합니다 . 하나의 html 페이지에 여러 양식 이 있으면 더 편리 합니다.- 기본 자바 스크립트, jQuery 또는 이와 유사한 필요 없음
- 코드는 html 태그 안에 있습니다. html을 검사하면 바로 동작하는 것을 볼 수 있습니다.
이 솔루션은 다음과 같이 작동합니다.
onchange입력 요소value가 수정 될 때마다 다음 스크립트를 실행합니다.form이 입력 요소는submit()에 지정된대로 양식이 모든 데이터를 URL로 보내도록합니다.action
jQuery 사용하기 :
$('#file').change(function() {
$('#target').submit();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>onchange이벤트가있는 JavaScript :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>$('#fileInput').change(function() {
$('#myForm').submit();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>가장 짧은 해결책은
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
이미 jQuery를 사용하고 있다면 :
<input type="file" onChange="$(this).closest('form').submit()"/>
이것은 사용자가 파일을 선택할 때 내 이미지 업로드 솔루션입니다.
HTML 부분 :
<form enctype="multipart/form-data" id="img_form" method="post">
<input id="img_input" type="file" name="image" accept="image/*">
</form>
자바 스크립트 :
document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
var upload = document.getElementById('img_input');
var image = upload.files[0];
$.ajax({
url:"/foo/bar/uploadPic",
type: "POST",
data: new FormData($('#img_form')[0]),
contentType:false,
cache: false,
processData:false,
success:function (msg) {}
});
};
jquery로 다음 코드를 시도하십시오.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#myForm').on('change', "input#MyFile", function (e) {
e.preventDefault();
$("#myForm").submit();
});
});
</script>
<body>
<div id="content">
<form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
<input type="file" id="MyFile" value="Upload" />
</form>
</div>
</body>
</html>
.NET WebForms를 사용하는 사람들은 전체 페이지 제출을 원하지 않을 수 있습니다. 대신, 동일한 onchange아이디어를 사용하여 자바 스크립트가 숨겨진 버튼 (예 : <asp : Button ...)을 클릭하면 숨겨진 버튼으로 나머지 버튼을 사용할 수 있습니다. 당신이하고 있는지 확인display: none; 버튼을하지 Visible="false".
HTML
<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>
자바 스크립트 퓨어
<script type="text/javascript">
window.onload = function() {
document.getElementById("xfilename").onchange = function() {
document.getElementById("xtarget").submit();
}
};
</script>
이 코드를 넣어 한 줄의 코드로 코드를 작동시킬 수 있습니다
<input type="file" onchange="javascript:this.form.submit()">
제출 버튼을 클릭하지 않고 서버에 파일을 업로드합니다.
<form action="http://example.com">
<input type="file" onchange="Submit()" />
</form>
<script>
// it will submit form 0 or you have to select particular form
document.getElementsByTagName("form")[0].submit();
</script>
반응형
'programing tip' 카테고리의 다른 글
| 한 줄 목록 이해 : if-else 변형 (0) | 2020.06.15 |
|---|---|
| 스칼라의 패턴 매칭 시스템에서 비교 연산자 사용 (0) | 2020.06.15 |
| 다른 테이블에없는 행을 선택하십시오. (0) | 2020.06.15 |
| 이 milw0rm 힙 스프레이 익스플로잇은 어떻게 작동합니까? (0) | 2020.06.15 |
| UILabel-줄 바꿈 텍스트 (0) | 2020.06.15 |