HTML의 5 다운로드 속성을 사용하여 양식 입력 type = "text"를 제출 버튼 뒤에있는 HREF로 어떻게 바꾸나요?

Linkfish

나는 내 머릿속에서 매우 단순 해 보이는 일을하려고 노력하고 있지만 어떤 이유로 든 해결할 수없고 Google을 지 쳤기 때문에 여기 누군가가 나를 도울 수 있기를 바랍니다.

예를 들어 CSV 파일에 대한 링크를 입력하는 양식 입력 텍스트 상자를 만들고 싶습니다. 제출 버튼을 눌러 강제로 디스크에 다운로드해야합니다. 쉬운 것 같습니다.

매우 간단한 HTML :

<html>
<head><title>FTD</title></head>
<body>
<form name="FTD">
<p><b>Force To Disk CSV Downloader</b></p><br>
<p>Enter your URL in the text field below and hit the Submit button.</p><br>
<input type="text"><br><br>
<input type="submit" value="Download now">
</form>
</body>
</html>

그래서 제가 시도한 것은 HTML5 다운로드 속성을 사용하여이 작업을 완료하는 것입니다 (위의 코드에서는 작동하지 않음). 여기에있는 기능은 CSV 또는 XML이 저장된 링크를 미리 알고 있지만 이러한 파일 중 일부가 잘 될 수 있다는 사실 때문에 브라우저에서 열지 않고 디스크 다운로드로 강제 실행되도록하고 싶습니다. 파일 크기가 1GB 이상이면 브라우저의 메모리가 부족합니다.

기본적으로 http://www.example.com/examplefile.csv 를 텍스트 필드에 넣으면 제출을 눌러 해당 입력을 가져 와서 HREF로 변환 한 다음 HTML5 다운로드 속성을 사용하여 강제로 내 내 브라우저에서 열지 않고 하드 드라이브.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download의 예에서 HREF를 대체하고 파일은 이미지 뒤에 있습니다. 이미지를 사용하는 대신 사용자가 URL을 텍스트 필드에 입력하고 제출 버튼을 사용하여 해당 링크의 파일을 내 HDD로 강제로 다운로드 할 수 있기를 바랍니다.

이를 수행하는 간단한 방법이 있습니까, 아니면 여기에서 필연적으로 JavaScript 또는 PHP를 사용하고 있습니까?

나는 아직 경험이 많지 않으므로 이것이 정말 어리석은 사람이라면 사과드립니다 :-)

감사! 감사합니다.

Linkfish

네딤 호직

다음과 같이 JS를 통해 제출 양식 (양식 작업의 링크 포함)을 트리거 할 수 있습니다.

document.getElementById('download').addEventListener('click', function(){
	document.getElementById('myForm').action = document.getElementById('input_link').value;
	document.getElementById('myForm').submit();
});

//Try with this link:
//https://samplecsvs.s3.amazonaws.com/Sacramentorealestatetransactions.csv
<form id="myForm" method="get" action="">
  <input type="text" id="input_link"/>
  <button type="button" id="download">Download!</button>
</form>

따라서 사용자가 버튼을 클릭하면 입력 링크를 대체하여 액션 속성을 형성하고 제출을 트리거합니다. 도움이 되었기를 바랍니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관