it-swarm-ko.tech

Firefox 3의 HTML 입력 양식에서 파일 경로를 얻는 방법

<input type="file">, 아래와 같이 :

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

IE7 (그리고 오래된 Firefox 2를 포함한 모든 유명한 브라우저)에서 '// server1/path/to/file/filename'과 같은 파일을 제출하면 제대로 작동하고 파일의 전체 경로와 파일 이름을 제공합니다.

Firefox 3에서는 Firefox 버그 추적 시스템 ( https://bugzilla.mozilla.org/show_bug.cgi?)에 설명 된대로 경로를 자르는 새로운 '보안 기능'으로 인해 'filename'만 반환합니다. id = 14322 )

이 '새로운 기능'을 극복하는 방법에 대한 단서가 없습니다. 웹앱의 모든 업로드 양식이 Firefox 3에서 작동하지 않기 때문입니다.

Firefox 3과 IE7에서 파일 경로를 얻는 단일 솔루션을 찾는 사람이 있습니까?

52
m_pGladiator

IE7 (그리고 오래된 Firefox 2를 포함한 모든 유명한 브라우저)에서 '// server1/path/to/file/filename'과 같은 파일을 제출하면 제대로 작동하고 파일의 전체 경로와 파일 이름을 제공합니다.

이 '새로운 기능'을 극복하는 방법에 대한 단서가 없습니다. 웹앱의 모든 업로드 양식이 Firefox 3에서 작동하지 않기 때문입니다.

여기에 큰 오해가 있습니다. 서버 측에서 full 파일 경로가 필요한 이유는 무엇입니까? 내가 클라이언트이고 _C:\path\to\passwords.txt_에 파일이 있다고 가정하고 전체 파일 경로를 제공합니다. 서버로서 어떻게 contents를 얻을 수 있습니까? 로컬 디스크 파일 시스템에 개방 TCP 연결되어 있습니까? 다른 웹 서버 시스템에서 웹 애플리케이션을 프로덕션으로 가져 왔을 때 파일 업로드 기능을 테스트 했습니까?

both 클라이언트와 서버가 실제로 동일한 컴퓨터에서 실행될 때만 작동합니다. same 하드 디스크 파일 시스템에 액세스하십시오. 이것은 웹 사이트를 로컬로 개발할 때 발생하므로 우연의 일치로 웹 브라우저 (클라이언트)와 웹 서버 (서버)가 동일한 컴퓨터에서 실행됩니다.

전체 파일 경로가 MSIE 및 기타 고대 웹 브라우저에서 전송되고있는 것은 security bug 때문입니다. WRFC2388 사양은 전체 파일 경로를 포함한다고 언급 한 적이 없습니다. 파일 이름 만 Firefox가 올바르게 작동합니다.

업로드 된 파일을 처리하기 위해 전체 파일 경로를 알 필요는 없습니다. _multipart/form-data_의 경우 클라이언트가 요청 본문의 서버로 이미 보낸 전체 파일 contents 에 관심이 있어야합니다. 의뢰. RFC2388에 명시된대로 양식을 다음과 같이 변경하십시오.

_<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
_

서버 측에서 업로드 된 파일의 내용을 얻는 방법은 사용중인 서버 측 프로그래밍 언어에 따라 다릅니다.

  • Java/JSP : HttpServletRequest#getPart() 또는 Apache Commons FileUpload를 사용하고 싶습니다 API 구문 분석합니다. 당신은 InputStream로 끝나야합니다. 파일 내용은 당신의 취향에 따라 OutputStream에 쓸 수 있습니다. this answer 에서 예제를 찾을 수 있습니다.

  • Java/JSF : _<h:inputFile>_ 구성 요소 또는 사용중인 구성 요소 라이브러리 또한 여기에서는 InputStream의 풍미로 파일 내용을 얻고 싶습니다. 예를 보려면 this answer 를 참조하십시오.

  • [~ # ~] php [~ # ~] : 파일 내용이 이미 암시 적으로 임시 디스크에 저장되어 있습니다. move_uploaded_file() 함수를 사용하여 원하는 위치로 이동하고 싶습니다. PHP manual 도 참조하십시오.

  • ASP.NET : 내가하지 않아 자세한 답변이 없지만 Google에서 나를위한 몇 가지 예를 찾았습니다 : ASP. NET 예제 , ASP.NET 2.0 예제

업로드 된 파일의 파일 이름 부분을 얻으려면 파일 이름에서 전체 경로를 trim 가져와야합니다. 이 정보는 즉, 귀하와 전혀 관련이 없습니다. 예를 들어이 Apache Commons FileUpload FAQ entry

FileItem.getName ()이 파일 이름뿐만 아니라 전체 경로를 반환하는 이유는 무엇입니까?

Internet Explorer는 기본 파일 이름뿐만 아니라 업로드 된 파일의 전체 경로를 제공합니다. FileUpload는 클라이언트 (브라우저)가 제공 한 것을 정확하게 제공하므로 응용 프로그램에서이 경로 정보를 제거 할 수 있습니다.

60
BalusC

Firefox에서 미리보기하면 작동합니다-첫 번째 예제에서 attachment는 attachment 요소의 객체입니다.

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;
10
houba

실제로 FF3이 나오기 직전에 몇 가지 실험을했으며 FF2는 Opera 9.0과 같이 파일 이름 만 보냅니다. IE는 전체 경로를 보냅니다). 인트라넷 응용 프로그램을 작성하지 않고 직접 네트워크 액세스로 파일을 가져 오지 않는 한, 서버는 사용자가 자신의 컴퓨터에서 파일을 저장하는 위치를 알 필요가 없기 때문에 서버가 파일을 업로드하는 과정과 관련이 없습니다.

변경된 것은 (그리고 당신이 가리키는 버그 항목의 실제 요점) FF3은 더 이상 JavaScript에서 파일 경로에 액세스 할 수 없다는 것입니다. 그리고 경로를 입력하거나 붙여 넣을 수는 없습니다. 더 성가신 일입니다 .Windows 탐색기에서 클립 보드로 파일의 경로를 복사하는 셸 확장명을 사용하여 그러한 형식으로 많이 사용했습니다. DragDropUpload 확장을 사용하여 문제를 해결했습니다. 그러나 이것은 주제가 아닌 것 같습니다.

이 새로운 행동을 멈추기 위해 웹 양식이 무엇을하고 있는지 궁금합니다.

[편집] Mike가 링크 한 페이지를 읽은 후 인트라넷에서 경로의 사용 (예 : 사용자 식별) 및 로컬 사용 (이미지 미리보기 표시, 파일의 로컬 관리 표시)이 나타납니다. User Jam-es는 nsIDOMFile에 대한 해결 방법을 제공하는 것 같습니다 (아직 시도되지 않음).

2
PhiLho

FF3에서 완전한 파일 경로를 얻을 수 없습니다. 아래는 파일 구성 요소 사용자 정의에 유용 할 수 있습니다.

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads('firstFile1','fileinputs1',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    var filename = document.createElement('input');
    filename.type='text';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title='Title';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement('input');
    image.type='button';
    image.value='Browse File';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
    {
    document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
2
Jay

이것은 대체 솔루션/수정입니다 ... FF3에서는 파일 찾아보기 상자 대신 텍스트 상자에서 파일의 전체 경로를 검색 할 수 있습니다. 그리고 그것도 ... 파일을 끌어다 놓아서!

파일을 html 페이지의 텍스트 상자에 끌어 놓을 수 있습니다. 파일의 전체 경로가 표시됩니다. 이 데이터는 서버로 쉽게 전송하거나 조작 할 수 있습니다.

확장명 DragDropUpload를 사용하기 만하면됩니다.

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

이 확장은 파일을 파일 찾아보기 (입력 파일) 상자에 끌어다 놓는 데 도움이됩니다. 그러나 검색하려고하면 여전히 파일 전체 경로를 얻을 수 없습니다.

그래서이 확장을 약간 조정했습니다. 방법으로 파일을 "텍스트 입력"상자에 끌어다 놓고 전체 경로를 얻을 수 있습니다. 따라서 FF3 Firefox 3에서 파일 전체 경로를 얻을 수 있습니다.

0
Kumaresan

FF3으로는 간단히 할 수 없습니다.

다른 옵션은 애플릿이나 다른 컨트롤을 사용하여 파일을 선택하고 업로드하는 것입니다.

0
roh

이 문제를 해결하는 가장 추악한 방법 중 하나는 사용자가 텍스트 상자에 디렉토리를 수동으로 입력하고이를 JavaScript의 파일 값 앞에 다시 추가하는 것입니다.

지저분한 ...하지만 작업중 인 사용자의 수준에 따라 다르며 보안 문제를 해결합니다.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

자바 스크립트

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
0
dan

XPCOM 을 살펴보십시오. 클라이언트가 Firefox 3을 사용하는 경우 사용할 수있는 것이있을 수 있습니다.

0
LohanJ

이것은 필요한 것이 경로가 아니라 오프라인으로 작동하는 파일에 대한 참조 인 경우 사용할 수있는 예입니다.

http://www.ab-d.fr/date/2008-07-12/

프랑스어로되어 있지만 코드는 javascript입니다 :)

이것은 기사가 가리키는 참고 문헌입니다 : http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor