Dit is mijn uploadknop.
<input type="text" name="file_path" id="file-path">
Dit is het tekstveld waar ik het volledige pad van het bestand moet tonen.
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
Dit is de JavaScript die mijn probleem oplost. Maar in de waarschuwingswaarde geeft me
C:\fakepath\test.csv
en Mozilla geeft me:
test.csv
Maar ik wil het lokale volledig gekwalificeerde bestandspad. Hoe dit probleem op te lossen?
Als dit te wijten is aan een beveiligingsprobleem van de browser, wat zou dan de alternatieve manier moeten zijn om dit te doen?
Antwoord 1, autoriteit 100%
Sommige browsers hebben een beveiligingsfunctie die voorkomt dat JavaScript het lokale volledige pad van uw bestand kent. Het is logisch – als client wil je niet dat de server het bestandssysteem van je lokale machine kent. Het zou leuk zijn als alle browsers dit zouden doen.
Antwoord 2, autoriteit 48%
Gebruik
document.getElementById("file-id").files[0].name;
in plaats van
document.getElementById('file-id').value
Antwoord 3, autoriteit 29%
Ik gebruik het object FileReader op de ingang onchangeEvenement voor uw invoerbestandstype! Dit voorbeeld gebruikt de ReadasDataurl-functie en om die reden zou u een tag moeten hebben. Het FileReader-object heeft ook leesbaarstarbeid om de binaire gegevens te krijgen, die later kunnen worden gebruikt om hetzelfde bestand op uw server te maken
Voorbeeld:
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;
}
Antwoord 4, Autoriteit 19%
Als u naar Internet Explorer, Tools, Internet-optie, beveiliging, op maat wilt, vindt u het “COWE DIRD DIRDIAD PAD bij het uploaden van bestanden naar een server” (het is een hele wegen omlaag) en klik op “Inschakelen”. Dit werkt
Antwoord 5, Autoriteit 6%
Ik ben blij dat browsers ons geven om ons te redden van opdringerige scripts en dergelijke. Ik ben niet blij met dat wil zeggen iets in de browser plaatsen dat een eenvoudige stijl-fix maakt, lijkt op een hack-aanval!
Ik heb A & LT gebruikt; Span & GT; om de bestandsinvoer te vertegenwoordigen, zodat ik de juiste styling kan toepassen op het & LT; DIV & GT; in plaats van het & lt; Input & GT; (nogmaals, vanwege IE). Dankzij dit wil zeggen, dwz wil de gebruiker een pad laten zien met een waarde die gewoon gegarandeerd heeft om ze op de bewaker te zetten en in het minst ongerust (zo niet helemaal bang te maken?!) … meer IE-Crap!
Hoe dan ook, dankzij degenen die hier de uitleg hebben gepost: ie browserbeveiliging: toevoegen” FakePath “aan bestandspad in invoer [Type =” -bestand “] , ik heb een kleine fixer-bovenste …
De onderstaande code doet twee dingen: het repareert een lte IE8-bug waarbij de onChange-gebeurtenis niet wordt geactiveerd totdat het uploadveld onBlur is en het werkt een element bij met een opgeschoond bestandspad dat de gebruiker niet bang maakt.
// 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);
Antwoord 6, autoriteit 3%
Ik kwam hetzelfde probleem tegen. In IE8 zou het kunnen worden omzeild door een verborgen invoer te maken na het besturingselement voor bestandsinvoer. Vul dit met de waarde van zijn vorige broer of zus. In IE9 is dit ook opgelost.
Mijn reden om het volledige pad te leren kennen, was om een javascript-afbeeldingsvoorbeeld te maken voordat ik het uploadde. Nu moet ik het bestand uploaden om een voorbeeld van de geselecteerde afbeelding te maken.
Antwoord 7, autoriteit 2%
Als u echt het volledige pad van het geüploade bestand moet verzenden, moet u waarschijnlijk zoiets als een ondertekende java-applet gebruiken, omdat er geen manier is om deze informatie te krijgen als de browser het niet verzendt .
Antwoord 8
Waarom gebruik je niet gewoon de target.files?
(Ik gebruik React JS in dit voorbeeld)
const onChange = (event) => {
const value = event.target.value;
// this will return C:\fakepath\somefile.ext
console.log(value);
const files = event.target.files;
//this will return an ARRAY of File object
console.log(files);
}
return (
<input type="file" onChange={onChange} />
)
Het File objectdat ik hierboven bedoel, ziet er als volgt uit:
{
fullName: "C:\Users\myname\Downloads\somefile.ext"
lastModified: 1593086858659
lastModifiedDate: (the date)
name: "somefile.ext"
size: 10235546
type: ""
webkitRelativePath: ""
}
Dus dan kun je gewoon de fullNamekrijgen als je het pad wilt.
Antwoord 9
het lijkt erop dat je het volledige pad in je localhost niet kunt vinden door js, maar je kunt het neppad verbergen om alleen de bestandsnaam te tonen. Gebruik jQuery om de geselecteerde bestandsnaam van de bestandsinvoer zonder het pad
Antwoord 10
Gebruik bestandslezers:
$(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 + ")" });
}
}
Antwoord 11
U zou op zijn minst een tijdelijk gemaakte kopie van het bestandspad op uw computer kunnen krijgen. De enige voorwaarde hier is dat uw invoerelement binnen een formulier moet staan
Wat u anders moet doen, is een attribuut enctypein de vorm invoeren, bijvoorbeeld:
<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>
je kunt de padstring onderaan vinden.
Het opent stream naar bestand en verwijdert het vervolgens.
Antwoord 12
Ik los mijn probleem op met axios.
`async function uploadFile(event) {
const { cloudName, cloudUploadPreset } = KEYS;
const data = new FormData();
const file = event.target.files[0]
const url =
`https://api.cloudinary.com/v1_1/${cloudName}/video/upload`;
data.append('file', file);
data.append('upload_preset', cloudUploadPreset);
axios.post(url, data).then((response) => {
console.log(response);
});
}`
Antwoord 13
Hallo, in mijn geval gebruik ik de asp.net-ontwikkelomgeving, dus ik wilde die gegevens uploaden in asynchronus ajax-verzoek, in [webMethod] kun je de bestandsuploader niet vangen omdat het geen statisch element is,
dus ik moest een omzet maken voor een dergelijke oplossing door het pad te repareren en vervolgens de gewenste afbeelding in bytes om te zetten om deze in DB op te slaan.
Hier is mijn javascript-functie,
hoop dat het je helpt:
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 alleen voor testen:
$(document).ready(function () {
FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
});
// this will give you : ~/EnsaLmadiLiYghiz