it-swarm-id.com

Cara mendapatkan jalur file dari formulir input HTML di Firefox 3

Kami memiliki formulir HTML sederhana dengan <input type="file">, seperti yang ditunjukkan di bawah ini:

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

Di IE7 (dan mungkin semua peramban terkenal, termasuk Firefox 2 yang lama), jika kita mengirimkan file seperti '// server1/path/ke/file/filename' ia berfungsi dengan baik dan memberikan path lengkap ke file dan nama file.

Di Firefox 3, ia hanya mengembalikan 'nama file', karena 'fitur keamanan' baru mereka untuk memotong jalur, seperti yang dijelaskan dalam sistem pelacakan kutu Firefox ( https://bugzilla.mozilla.org/show_bug.cgi? id = 14322 )

Saya tidak tahu cara mengatasi 'fitur baru' ini karena ini menyebabkan semua formulir unggah di webapp saya berhenti bekerja di Firefox 3.

Adakah yang bisa membantu untuk menemukan solusi tunggal untuk mendapatkan path file di Firefox 3 dan IE7?

52
m_pGladiator

Di IE7 (dan mungkin semua peramban terkenal, termasuk Firefox 2 yang lama), jika kita mengirimkan file seperti '// server1/path/ke/file/filename' ia berfungsi dengan baik dan memberikan path lengkap ke file dan nama file.

Saya tidak tahu cara mengatasi 'fitur baru' ini karena ini menyebabkan semua formulir unggah di webapp saya berhenti bekerja di Firefox 3.

Ada kesalahpahaman besar di sini. Mengapa Anda memerlukan path file full di sisi server? Bayangkan saya adalah klien dan saya memiliki file di C:\path\to\passwords.txt Dan saya memberikan path file lengkap kepada Anda. Bagaimana Anda sebagai server bisa mendapatkan content? Apakah Anda memiliki koneksi TCP terbuka ke sistem file disk lokal saya? Apakah Anda menguji fungsionalitas upload file ketika Anda membuat aplikasi web Anda diproduksi di mesin server yang berbeda?

Ini hanya akan bekerja ketika keduanya klien dan server berjalan pada secara fisik mesin yang sama , karena Anda kemudian akan memiliki akses ke sama sistem file hard disk. Ini hanya akan terjadi ketika Anda secara lokal mengembangkan situs web Anda dan dengan demikian server web (klien) dan server web (server) secara kebetulan berjalan di mesin yang sama.

Bahwa path file lengkap sedang dikirim dalam MSIE dan browser web kuno lainnya disebabkan oleh bug keamanan. Spesifikasi W dan RFC2388 tidak pernah disebutkan untuk menyertakan path file lengkap. Hanya nama file. Firefox melakukan tugasnya dengan benar.

Untuk menangani file yang diunggah, Anda tidak perlu tahu path file lengkap. Anda sebaiknya tertarik pada file lengkap konten yang telah dikirim klien ke server di badan permintaan jika multipart/form-data permintaan. Ubah formulir Anda agar terlihat seperti berikut ini sebagaimana dinyatakan dalam RFC2388:

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

Cara mendapatkan konten file yang diunggah di sisi server tergantung pada bahasa pemrograman sisi server yang Anda gunakan.

  • Java/JSP : Anda ingin menggunakan HttpServletRequest#getPart() atau Apache Commons FileUpload API untuk menguraikannya. Anda harus berakhir dengan InputStream dengan konten file yang pada gilirannya dapat Anda tulis ke OutputStream apa pun sesuai selera Anda. Anda dapat menemukan contoh di jawaban ini .

  • Java/JSF : Anda ingin menggunakan <h:inputFile> komponen atau komponen unggahan file lainnya yang disediakan oleh pustaka komponen yang Anda gunakan. Juga di sini, Anda ingin mendapatkan konten file dalam rasa InputStream. Lihat jawaban ini untuk contoh.

  • [~ # ~] php [~ # ~] : konten file sudah tersimpan secara implisit di disk temp. Anda ingin menggunakan move_uploaded_file() fungsi untuk memindahkannya ke lokasi yang diinginkan. Lihat juga manual PHP .

  • ASP.NET : tidak ada jawaban terperinci dari saya karena saya tidak melakukannya, tetapi Google telah menemukan beberapa contoh untuk saya: ASP. Contoh NET , contoh ASP.NET 2.

Setiap kali Anda ingin mendapatkan bagian nama file dari file yang diunggah, Anda harus memotong path lengkap dari nama file. Informasi ini sama sekali tidak relevan bagi Anda. Lihat juga contoh ini Apache Commons FileUpload FAQ entri

Mengapa FileItem.getName () mengembalikan seluruh path, dan bukan hanya nama file?

Internet Explorer menyediakan seluruh jalur ke file yang diunggah dan bukan hanya nama file dasar. Karena FileUpload menyediakan persis apa yang disediakan oleh klien (browser), Anda mungkin ingin menghapus informasi jalur ini di aplikasi Anda.

60
BalusC

Untuk pratinjau di Firefox berfungsi sebagai ini - lampiran adalah objek elemen lampiran pada contoh pertama:

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

Sebenarnya, tepat sebelum FF3 keluar, saya melakukan beberapa percobaan, dan FF2 hanya mengirim nama file, seperti halnya Opera 9.0. Hanya IE mengirimkan path lengkap. Perilaku ini masuk akal, karena server tidak harus tahu di mana pengguna menyimpan file di komputernya, itu tidak relevan dengan proses unggah. Kecuali jika Anda menulis aplikasi intranet dan mendapatkan file dengan akses jaringan langsung!

Apa yang telah berubah (dan itulah poin sebenarnya dari item bug yang Anda tuju) adalah bahwa FF3 tidak lagi membiarkan akses ke jalur file dari JavaScript. Dan tidak akan membiarkan ketik/rekatkan lintasan di sana, yang lebih menyebalkan bagi saya: Saya memiliki ekstensi Shell yang menyalin lintasan file dari Windows Explorer ke clipboard dan saya sering menggunakannya dalam bentuk seperti itu. Saya memecahkan masalah dengan menggunakan ekstensi DragDropUpload. Tapi ini menjadi di luar topik, saya khawatir.

Saya ingin tahu apa yang dilakukan formulir Web Anda untuk berhenti bekerja dengan perilaku baru ini.

[EDIT] Setelah membaca halaman yang ditautkan oleh Mike, saya melihat memang penggunaan jalur intranet (mengidentifikasi pengguna misalnya) dan kegunaan lokal (tampilkan pratinjau gambar, pengelolaan file lokal). Pengguna Jam-es tampaknya memberikan solusi dengan nsIDOMFile (belum dicoba).

2
PhiLho

Kami tidak bisa mendapatkan path file lengkap dalam FF3. Di bawah ini mungkin berguna untuk kustomisasi komponen File.

<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

Ini adalah solusi/perbaikan alternatif ... Dalam FF3, Anda dapat mengambil path lengkap file dalam kotak teks alih-alih kotak isi file. Dan itu juga ... Dengan menyeret/menjatuhkan file!

Anda dapat menyeret jatuhkan file Anda ke kotak teks di halaman html Anda. dan itu akan menampilkan path lengkap file. Data ini dapat ditransfer ke server Anda dengan mudah atau memanipulasi mereka.

Yang harus Anda lakukan adalah menggunakan ekstensi DragDropUpload

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

Ekstensi ini akan membantu Anda dalam menyeret menjatuhkan file ke kotak File Browse (Input file) Anda. Tapi tetap saja Anda tidak bisa mendapatkan path file lengkap, Jika Anda mencoba untuk mengambil.

Jadi, saya sedikit mengubah ekstensi ini. Dengan cara ini saya bisa menyeret jatuhkan file ke kotak "Input Teks" dan dapatkan path lengkap file. Dan dengan demikian saya bisa mendapatkan file path lengkap di FF3 Firefox 3.

0
Kumaresan

Cukup Anda tidak dapat melakukannya dengan FF3.

Pilihan lain bisa menggunakan applet atau kontrol lain untuk memilih dan mengunggah file.

0
roh

Salah satu cara yang sangat buruk untuk menyelesaikan ini adalah memiliki pengguna mengetikkan direktori secara manual ke dalam kotak teks, dan menambahkan ini kembali ke depan nilai file dalam JavaScript.

Berantakan ... tetapi itu tergantung pada tingkat pengguna yang bekerja dengan Anda, dan mengatasi masalah keamanan.

<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>

JavaScript

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

Lihat XPCOM , mungkin ada sesuatu yang dapat Anda gunakan jika Firefox 3 digunakan oleh klien.

0
LohanJ

Ini adalah contoh yang dapat bekerja untuk Anda jika yang Anda butuhkan bukan path, tetapi referensi ke file yang bekerja offline.

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

Itu dalam bahasa Prancis, tetapi kodenya adalah javascript :)

Ini adalah referensi yang ditunjukkan artikel: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor