반응형
파일을 선택할 때 업로드 양식을 자동으로 제출하려면 어떻게 해야 합니까?
간단한 파일 업로드 양식이 있습니다.파일이 선택되었을 때 자동으로 제출하도록 하려면 어떻게 해야 합니까?사용자가 제출 단추를 누를 필요가 없도록 합니다.
양식에 전화하시면 됩니다.submit메소드 인 더onchange파일 입력의 이벤트입니다.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
그냥 말해줘요.file- 변경 시 양식을 자동으로 제출하도록 입력합니다.
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>이 솔루션은 다음과 같이 작동합니다.
onchange입력 요소가 다음 스크립트를 실행하도록 합니다.value수정되었습니다.form이 입력 요소가 속한 양식을 참조합니다.submit()에서 지정한 대로 양식에서 모든 데이터를 URL로 보냅니다.action
이 솔루션의 장점:
- 작업 없이 작업
ids. 한 html 페이지에 여러 양식이 있으면 생활이 편리해집니다. - 네이티브 자바스크립트, jQuery 또는 유사한 것이 필요하지 않습니다.
- 코드는 html 태그 안에 있습니다.html을 검사하면 바로 동작을 알 수 있습니다.
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이벤트:
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>jQuery 및 :
$('#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>
사용자가 파일을 선택했을 때 이것이 제 이미지 업로드 솔루션입니다.
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 simple을 이미 사용하는 경우:
<input type="file" onChange="$(this).closest('form').submit()"/>
jquery와 함께 bellow code를 시도합니다.
<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 전체 페이지 제출을 원하지 않을 수 있습니다.대신 동일한 것을 사용합니다.onchangejavascript가 숨겨진 버튼을 클릭하도록 하는 아이디어(예: <asp:버튼...) 그리고 숨겨진 버튼은 나머지를 제거할 수 있습니다.당신이 하고 있는지 확인해 보세요.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>
$('#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>언급URL : https://stackoverflow.com/questions/7321855/how-do-i-auto-submit-an-upload-form-when-a-file-is-selected
반응형
'prosource' 카테고리의 다른 글
| 열에 전자 메일 주소 값 0이 없는데도 쿼리에서 결과가 나타나는 이유 (0) | 2023.11.04 |
|---|---|
| 쿼리 양식 필드 값 가져오기 (0) | 2023.11.04 |
| 대리 키 대 자연 키/비즈니스 키 (0) | 2023.11.04 |
| 첫번째 요소를 제외한 모든 하위 요소 선택 (0) | 2023.11.04 |
| MySQL의 부울 값에 대한 TINYINT 대 ENUM(0, 1) (0) | 2023.11.04 |