<input type="file" id="file-id" name="file_name" onchange="theimage();">
Dies ist meine Upload-Schaltfläche.
<input type="text" name="file_path" id="file-path">
In diesem Textfeld muss ich den vollständigen Pfad der Datei angeben.
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
Dies ist das JavaScript, das mein Problem löst. Aber in der Alarmstufe gibt es mich
C:\fakepath\test.csv
und Mozilla gibt mir:
test.csv
Aber ich möchte den lokalen vollständig qualifizierten Dateipfad . Wie kann dieses Problem gelöst werden?
Wenn dies auf Browsersicherheitsprobleme zurückzuführen ist, wie sollte dies alternativ erfolgen?
Einige Browser verfügen über eine Sicherheitsfunktion, die verhindert, dass JavaScript den lokalen vollständigen Pfad Ihrer Datei erkennt. Es ist sinnvoll - Sie möchten als Client nicht, dass der Server das Dateisystem Ihres lokalen Computers kennt. Es wäre schön, wenn alle Browser dies tun würden.
Benutzen
document.getElementById("file-id").files[0].name;
anstatt
document.getElementById('file-id').value
Wenn Sie zu Internet Explorer, Extras, Internetoption, Sicherheit, Benutzerdefiniert gehen, finden Sie den Pfad "Einschließen des lokalen Verzeichnisses beim Hochladen von Dateien auf einen Server" (es gibt einige Möglichkeiten) und klicken auf "Aktivieren". Das wird funktionieren
Ich verwende das Objekt FileReader für das Eingabeereignis onchange
für Ihren Eingabedateityp! In diesem Beispiel wird die Funktion readAsDataURL verwendet. Aus diesem Grund sollten Sie über ein Tag verfügen. Das FileReader-Objekt enthält auch readAsBinaryString, um die Binärdaten abzurufen, die später zum Erstellen derselben Datei auf Ihrem Server verwendet werden können
Beispiel:
var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("yourImgTag");
img.src = event.target.result;
}
Ich freue mich, dass Browser uns vor aufdringlichen Skripten und ähnlichem schützen möchten. Ich bin nicht zufrieden damit, dass IE etwas in den Browser einfügt, das einen einfachen Style-Fix wie einen Hack-Angriff aussehen lässt!
Ich habe ein <span> verwendet, um die Dateieingabe darzustellen, so dass ich anstelle von <input> (noch einmal wegen IE) ein entsprechendes Styling auf <div> anwenden konnte. Aus diesem Grund möchte IE dem Benutzer einen Pfad mit einem Wert zeigen, der sie garantiert nur auf der Hut hält und im geringsten besorgniserregend ist (wenn sie sie nicht völlig abschreckt?!) ... MEHR IE-CRAP !
Trotzdem danke denen, die die Erklärung hier gepostet haben: IE Browsersicherheit: Anhängen von "fakepath" an den Dateipfad in input [type = "file"] , ich habe einen kleineren Fixer zusammengesetzt- Oberer, höher...
Der folgende Code führt zwei Dinge aus: Er behebt einen IE8-Bug, bei dem das onChange -Ereignis erst ausgelöst wird, wenn das onBlur-Feld des Uploadfelds ein Element mit einem bereinigten Dateipfad aktualisiert, der den Benutzer nicht erschreckt.
// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
// document onReady wrapper
$().ready(function(){
// check for the nefarious IE
if($.browser.msie) {
// capture the file input fields
var fileInput = $('input[type="file"]');
// add presentational <span> tags "underneath" all file input fields for styling
fileInput.after(
$(document.createElement('span')).addClass('file-underlay')
);
// bind onClick to get the file-path and update the style <div>
fileInput.click(function(){
// need to capture $(this) because setTimeout() is on the
// Window keyword 'this' changes context in it
var fileContext = $(this);
// capture the timer as well as set setTimeout()
// we use setTimeout() because IE pauses timers when a file dialog opens
// in this manner we give ourselves a "pseudo-onChange" handler
var ieBugTimeout = setTimeout(function(){
// set vars
var filePath = fileContext.val(),
fileUnderlay = fileContext.siblings('.file-underlay');
// check for IE's lovely security speil
if(filePath.match(/fakepath/)) {
// update the file-path text using case-insensitive regex
filePath = filePath.replace(/C:\\fakepath\\/i, '');
}
// update the text in the file-underlay <span>
fileUnderlay.text(filePath);
// clear the timer var
clearTimeout(ieBugTimeout);
}, 10);
});
}
});
})(jQuery);
Ich bin durch dasselbe Problem gekommen. In IE8 könnte dies durch Erstellen einer versteckten Eingabe nach der Dateieingabesteuerung behoben werden. Füllen Sie dies mit dem Wert des vorherigen Geschwisters. In IE9 wurde dies ebenfalls behoben.
Ich wollte den vollständigen Pfad kennen lernen, weil ich vor dem Hochladen eine Javascript-Bildvorschau erstellt habe. Jetzt muss ich die Datei hochladen, um eine Vorschau des ausgewählten Bildes zu erstellen.
Wenn Sie wirklich den vollständigen Pfad der Uploded-Datei senden müssen, müssen Sie wahrscheinlich so etwas wie ein signiertes Java-Applet verwenden, da diese Informationen nicht abgerufen werden können, wenn der Browser sie nicht sendet.
anscheinend können Sie den vollständigen Pfad in Ihrem localhost nicht mit js finden. Sie können jedoch den Fakepath ausblenden, um nur den Dateinamen anzuzeigen. Benutze jQuery, um den Dateinamen der Dateieingabe ohne Pfad zu erhalten
Ergänzend zu Sardesh Sharmas Antwortgebrauch:
document.getElementById("file-id").files[0].path
Für vollen Weg.
In meinem Fall verwende ich die asp.net-Entwicklungsumgebung. Ich wollte diese Daten in asynchroner ajax-Anfrage hochladen. In [webMethod] können Sie den Datei-Uploader nicht abfangen, da er kein statisches Element ist Ich musste für eine solche Lösung einen Umsatz erzielen, indem ich den Pfad festlegte, dann das gewünschte Bild in Bytes konvertieren, um es in DB zu speichern.
Hier ist meine Javascript-Funktion. Ich hoffe, es hilft Ihnen:
function FixPath(Path)
{
var HiddenPath = Path.toString();
alert(HiddenPath.indexOf("FakePath"));
if (HiddenPath.indexOf("FakePath") > 1)
{
var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
MainStringLength = HiddenPath.length - UnwantedLength;
var thisArray =[];
var i = 0;
var FinalString= "";
while (i < MainStringLength)
{
thisArray[i] = HiddenPath[UnwantedLength + i + 1];
i++;
}
var j = 0;
while (j < MainStringLength-1)
{
if (thisArray[j] != ",")
{
FinalString += thisArray[j];
}
j++;
}
FinalString = "~" + FinalString;
alert(FinalString);
return FinalString;
}
else
{
return HiddenPath;
}
}
hier nur zum testen:
$(document).ready(function () {
FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
});
// this will give you : ~/EnsaLmadiLiYghiz
Dateileser verwenden:
$(document).ready(function() {
$("#input-file").change(function() {
var length = this.files.length;
if (!length) {
return false;
}
useImage(this);
});
});
// Creating the function
function useImage(img) {
var file = img.files[0];
var imagefile = file.type;
var match = ["image/jpeg", "image/png", "image/jpg"];
if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
alert("Invalid File Extension");
} else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(img.files[0]);
}
function imageIsLoaded(e) {
$('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });
}
}