Öffnung ein javascript-Dialogfeld zum speichern der vollständigen Speicherort der Datei in eine var

Brauche ich Eure Hilfe.

Ich würde gerne design eine javascript-Funktion, so dass, wenn ich es nennen, es öffnet sich eine Dialogbox, die Sie fragt mich, navigieren Sie zur ausgewählten Datei, sobald ich auf die "öffnen" - Taste, es wird dann speichern Sie die Datei Pfad in eine var.

Wie tun Sie dies? Ich möchte NICHT, das input type="file" - Methode, da ich nicht verlangen, dass bestimmten Eingabe auf meiner Seite.

ie:

function getlocation() {
var x = popup the open file dialog box and let the user select a file
}

Sie können nicht tun, was Sie wollen. Ohne ein <input type="file" /> gibt es keine Möglichkeit zum öffnen einer Datei-Auswahl-dialog. Auch wenn Sie nicht verwenden, können Sie nur den Namen der Datei, können Sie den vollständigen Pfad an (das ist ein riesiges Sicherheitsrisiko). Wenn Sie nicht möchten, dass das Eingabe angezeigt werden, können Sie verstecken es, und lösen Sie es mithilfe von JavaScript.
Tatsächlich, ich glaube nicht, dass Sie auslösen können, es mit Javascript. Alles, was Sie sagte, klingt gut 🙂 Aber ich denke (vielleicht nur IE) nicht alle Browser können Sie öffnen Sie es programmatisch. Sie haben, um es zu verstecken und zu täuschen, die user zum klicken auf eine opake, gestapelt Datei input...zumindest cross-browser-kompatibel.
Ich machte eine kurze demo von einem display: none Eingang, und die Auslösung seiner click Methode scheint zu funktionieren; zumindest in Chrome, Firefox und IE 9. jsfiddle.net/rJA7n Eh, die andere Methode funktioniert auch. Ich kenne den AJAX uploader ich verwende auf meiner Webseite tut.
Gutes Beispiel. Ich denke mal, dass ich gelesen habe, in der Vergangenheit, es ist nicht voll kompatibel mit allen Browsern. Eine Kombination von Lesen stackoverflow.com/questions/1829774/... (und die mögliche doppelte) ist nur eine Idee, wie widersprüchlich es ist. Natürlich, ich vermute, dass die Inkonsistenz ist vor allem mit alten IE und Opera (und ältere Versionen von FF/Chrome selbst). Natürlich, wir dürfen das nicht immer der code für die Vergangenheit, aber ich wollte darauf hingewiesen haben. Speziell, dass die opaque - /Stapel-trick sollte einheitlich sein
Mein Beispiel scheint nicht zu funktionieren in der neusten Opera und es funktioniert nicht in IE < 9. Für ein gutes Beispiel des undurchsichtigen trick, betrachten Sie dies uploader: fineuploader.com
Ja, das ist alles, was ich hinweisen wollte 🙂 Und das sieht aus wie ein kühl-uploader. Ich weiß, in der Vergangenheit, weil wir wollten, dass das styling einer input[file] element, das im Einklang mit dem rest unserer Seite, ich hatte zum erstellen einer pseudo input[file] - und Figur-styling verwenden Sie die opaque-trick. Wir waren nicht für eine sofortige upload, also das ganze ajax/auto upload und die Fortschrittsleiste Sachen waren nicht ein Teil davon, aber es war interessant, zu Bügeln und zu lernen.
Ich mag, wie Sie zu betrügen Sie in Wirklichkeit mit einem Klick auf ein Datei-upload-element! Wie auch immer, nach einigen Tests scheint es, mein Beispiel funktioniert im IE 8! Es ist nur Oper, die nicht wie die Auslösung .click auf eine Datei-upload-element. jsbin.com/esahij/5/edit (jsbin weil jsFiddle funktioniert nicht im IE 8) Also, für eine weitere cross-browser-Methode, verwenden Sie die opaque - /Stapel-trick 🙂
Was willst du mit dem string, den Sie bekommen? Wie ich sagte, alles, was Sie bekommen können ist der name der Datei, können Sie nicht den vollständigen Pfad an. Einige Browser sogar den Weg C:\fakepath\file.name, und andere werden nur zurück file.name. Denken Sie daran, der Datei-Picker sind asynchron! Sie müssen verwenden Sie die onchange event-handler, um die gewählte Datei.
Ja, sneaky sneaky. Ich nie würde gedacht haben, es sei denn, ich habe gelesen, wie es zu tun =/. Aber das ist komisch, es funktioniert im IE8, es schien auf der Liste, der nicht funktioniert. Testen Sie auf einem nativen IE8 oder IE9 mit IE8 emuliert? Nur Wundern. Und ja, Opera stinkt es, wenn es dazu kommt, denke ich. Auch erkannte ich mit Geigen - Sie entwickeln konnte, es auf einem anderen browser, dann öffnen Sie diese version von the fiddle: jsfiddle.com/whatever/show im IE. Natürlich, es nicht ermöglichen, für die Live-Bearbeitung der fiddle, sondern ermöglicht es Ihnen, "halten mit" jsFiddle
Ich wurde getestet auf einem nativen IE 8 (über eine virtuelle Maschine mit Windows XP).
Sehr cool. Ich denke, es kann nicht in älter IE 🙂
Ich hoffe, dass ich G-d, dass niemand eine version des IE, die älter als 8! :O
Ich Wünsche. Leider ist das derzeit, was ich bin-targeting mit unserem aktuellen Projekt - IE 7/8, und ein bisschen 9. Ich weiß, die Menschen haben immer noch zu target IE 6. Ich bin mir ziemlich sicher, dass 6 & 7 sind wirklich nur von Unternehmen mit gesperrten Netze, insbesondere die Medizintechnik-Unternehmen. ES funktioniert einfach nicht wie ein upgrade von einer "stabilen" Umgebung, und manchmal sind Sie einfach nur faul. Aber es ist ein großer Schritt, wenn es Hunderte von Computern, müssen aktualisiert werden. Ihr motto ist so etwas wie "Wenn es nicht kaputt ist, repariere es nicht" - Ihre aktuelle setup funktioniert gut genug, aber Sie wissen nicht, wie es wirkt sich auf andere Menschen...
Übrigens, ich denke, man sollte nur posten, eine Antwort (wenn Sie möchten) Erläuterung der Optionen für die OP. Ihre Absicht ist unklar, aber die beiden Optionen, die wir besprochen haben, sollte ausreichend sein, um eine Antwort auf Ihre Frage. Eine versteckte input[file] ist programmgesteuert ausgelöst, um ein Dialogfeld zu öffnen, oder ist Opak/gestapelt, um trick Benutzer in körperlich anklicken, erscheinen, um Sie auf etwas anderes (eine Schaltfläche, ein pseudo-button, etc.)
Ja, könnte auch dies als eine Antwort. So wie es da steht, unabhängig davon, was der OP will, ist dies die einzige Lösung.

InformationsquelleAutor John Smith | 2013-04-12

javascript

Der einzige Weg, um dem Benutzer zu ermöglichen, um eine Datei auszuwählen, ist die Verwendung eines <input type="file" />¹. Sie nicht haben, um dieses element sichtbar, nur auf der Seite.

Wenn ein Benutzer eine Datei auswählt, wird alles, was Sie von ihm bekommen können ist sein name. Man kann nicht seinen Weg. Beachten Sie auch, dass Datei-upload-elements asynchron sind. Sie müssen verwenden Sie die onchange Ereignis (Rückruf), um den Namen.

Können Sie verstecken die upload-element mit display: none, und dann nur noch eine weitere JavaScript-Funktion programmgesteuert auslösen. (HINWEIS: Diese Methode funktioniert nicht in Opera und evtl. anderen Browsern. Es wurde getestet in Chrome, Firefox und IE 8/9)

<style>
    #getFile{
        display: none;
    }
</style>

<input type="file" id="getFile" />
<button id="openFile" type="button">Click Me</button>

<script>
    var uploadElement = document.getElementById('getFile'),
        uploadTrigger = document.getElementById('openFile'),
        openFileUpload = function(){
            uploadElement.click();
        },
        alertValue = function () {
            alert(uploadElement.value);
        };

    if (window.addEventListener) {
        uploadTrigger.addEventListener('click', openFileUpload);
        uploadElement.addEventListener('change', alertValue);
    } else {
        uploadTrigger.attachEvent('onclick', openFileUpload);
        uploadElement.attachEvent('onchange', alertValue);
    }
</script>

DEMO: http://jsfiddle.net/rJA7n/3/show (Bearbeiten Sie es auf: http://jsfiddle.net/rJA7n/3/)

Andere Methode, die funktionieren sollte in die meisten - Browser, darunter Opera) ist, um die Datei-upload-element "unsichtbar" und setzen Sie ein element oben drauf. Also, wenn Sie auf, was Sie denken, ist ein Knopf, du bist wirklich ein Klick auf das upload-element. AJAX-Uploader (wie http://fineuploader.com/) mit dieser Methode können Sie auf "Stil" upload-buttons.

<style>
    #getFile{
        width: 100px;
        opacity: 0;
        filter: alpha(opacity = 0);
    }

    #openFile{
        display: inline;
        margin-left: -100px;
        background-color: red;
        height: 30px;
        width: 100px;
        padding: 10px;
        color: white;
        text-align: center;
    }
</style>

<input type="file" id="getFile" />
<div id="openFile">Click Me</div>

<script>
    var uploadElement = document.getElementById('getFile'),
        alertValue = function(){
            alert(uploadElement.value);
        };

    if(window.addEventListener){
        uploadElement.addEventListener('change', alertValue);
    }
    else{
        uploadElement.attachEvent('onchange', alertValue);
    }
</script>

DEMO: http://jsfiddle.net/cKGft/4/show/ (Bearbeiten Sie es auf: http://jsfiddle.net/cKGft/4/)

_{¹ Gut, Sie kann Verwendung von drag & drop, wenn Sie möchten, um wirklich Lust. Ich machte eine kurze demo hier: http://jsfiddle.net/S6BY8/2/show (Bearbeiten Sie es auf: http://jsfiddle.net/S6BY8/2/)}

InformationsquelleAutor Rocket Hazmat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.