Экранирование обратной косой черты в строке - javascript

Мне нужно показать имя текущего выбранного файла (в элементе <input type="file">).

Все в порядке, единственная проблема в том, что я получаю такую ​​строку "C:\fakepath\typog_rules.pdf" (браузер автоматически помещает это как значение для элемента ввода).

Когда я пытаюсь разбить строку на '\' или '\\', это не удается из-за косых черт без экранирования. Попытки сопоставить/заменить косые черты также не увенчались успехом. Это можно обойти? Мне нужно, чтобы это работало хотя бы в Opera и IE (потому что в других браузерах я могу использовать FileReader)

НАПРИМЕР. Я получаю «C:\fakepath\typog_rules.pdf» в качестве входных данных и хочу получить «typog_rules.pdf» в качестве выходных данных.


javascript file input escaping backslash
person Max    schedule 23.12.2011    source источник
comment
Можете ли вы показать нам код и ошибку, которую вы получаете?   -  person ean5533    schedule 23.12.2011
comment
Отвечает ли это на ваш вопрос? Обратная косая черта JavaScript (\‌) в переменных вызывает ошибку   -  person Liam    schedule 27.07.2020

Ответы (5)


arrow_upward
32
arrow_downward

Из соображений безопасности невозможно получить реальный полный путь к файлу, на который ссылается элемент <input type="file" />.

Этот вопрос уже упоминает и ссылается на другие вопросы Stack Overflow по этой теме.

Предыдущий ответ сохраняется как ссылка для будущих посетителей, которые перейдут на эту страницу через заголовок, теги и вопрос.
Обратная косая черта должна быть экранирована .

string = string.split("\\");

В JavaScript обратная косая черта используется для экранирования специальных символов, таких как символы новой строки (\n). Если вы хотите использовать буквальную обратную косую черту, необходимо использовать двойную обратную косую черту.

Таким образом, если вы хотите сопоставить две обратные косые черты, необходимо использовать четыре обратные косые черты. Например, alert("\\\\") покажет диалоговое окно, содержащее две обратные косые черты.

person Rob W    schedule 23.12.2011
comment
Не полезно. Вы не можете контролировать, что браузер дает вам в качестве входного значения [файла]. C:\fakepath \typog_rules.pdf.split(\\); =› [C:akepath ypog_rules.pdf] - person Max; 23.12.2011
comment
@user1113690 user1113690 Чего ты хочешь? Разделить "C:\\fake\\path\\file" на ["C:", "fake", "path", "file"]? Вы должны уточнить свой вопрос и добавить текущий вывод, реальный ввод, ожидаемый вывод и соответствующий код. - person Rob W; 23.12.2011
comment
Я получаю C:\fakepath\typog_rules.pdf в качестве входных данных и хочу получить typog_rules.pdf в качестве выходных данных. - person Max; 23.12.2011
comment
Ага - Это ожидаемое поведение. Очевидно, что по соображениям безопасности нежелательно, чтобы фрагмент кода JavaScript мог получить полный путь к файлу. Подводя итог, невозможно получить полный путь к файлу в элементе <input type=file>. - person Rob W; 24.12.2011
comment
К сожалению, похоже, это применимо только к Opera. IE может разделить строку C:\fakepath \typog_rules.pdf.split(\\); как положено. Спасибо за ваше время! - person Max; 24.12.2011
comment
@user1113690 user1113690 Потому что IE показывает полный путь. Ваша проблема не связана со строковыми операциями, а с получением значения поля ввода файла. Если этот ответ вас удовлетворил, отметьте вопрос как принятый, щелкнув зеленую галочку слева от ответа. - person Rob W; 24.12.2011
comment
Любое решение для этого? Получение C:\fakepath\typog_rules.pdf.split(\\); =› [C:akepath ypog_rules.pdf] в MAC Chrome - person Pankaj Phartiyal; 04.04.2013
comment
@PankajPhartiyal Вы избежали обратной косой черты в исходном строковом литерале? Если вам кажется, что вы использовали одну обратную косую черту, которая экранирует следующие символы: \f (перевод страницы), \t (табуляция). Вместо этого используйте "C:\\fakepath\\typog_rules.pdf".split("\\");. Две обратные косые черты необходимы, чтобы увидеть обратную косую черту в строке. - person Rob W; 04.04.2013
comment
И как я могу сделать это в Javascript. Я имею в виду, как я могу преобразовать одинарную обратную косую черту в двойную. Потому что в таких строках нельзя избежать экранирования. функции замены, разделения и других операций со строками не могут обнаружить /, поскольку строка передается им в экранированной форме. например "C:\fakepath\alex-dukal_stamp-brushes_v2.abr".lastIndexOf('\\') возвращает -1 - person Pankaj Phartiyal; 04.04.2013
comment
@PankajPhartiyal Как я уже сказал в своем предыдущем комментарии, \f — это экранированный символ канала формы. Это не обратная косая черта, за которой следует f. Если вы хотите поместить в строку обратную косую черту, экранируйте ее: `\`. Вам не нужно беспокоиться о побегах, если вы их понимаете. Просто не забудьте экранировать обратную косую черту, когда вы собираетесь ссылаться на обратную косую черту в исходном коде. Когда вы получаете ввод, например. пользователя, обратная косая черта не имеет особого значения. - person Rob W; 04.04.2013
comment
$("[type=file]").val() возвращает "C:\fakepath\alex-dukal_stamp-brushes_v2.abr", но когда я набираю "C:\fakepath\alex-dukal_stamp-brushes_v2.abr", он возвращает экранированную версию "C:akepathalex-dukal_stamp-brushes_v2.abr". Означает, что $("[type=file]").val() возвращает строку с двойным экранированием, которая сохраняет косые черты. Я играл с необработанной строкой в ​​хромированной консоли и все неправильно понял. Спасибо. - person Pankaj Phartiyal; 04.04.2013
comment
@Pankaj: и вы все еще ошибаетесь, представление строк в памяти никогда не экранируется. Экранирование — это вопрос сериализации. .val() возвращает неэкранированные строки. Что неправильно, так это то, что при печати напечатанное значение строки может не передаваться туда и обратно, потому что строковые литералы требуют экранирования. - person Lie Ryan; 30.05.2013

arrow_upward
4
arrow_downward

Я думаю, что это ближе к ответу, который вы ищете:

<input type="file">

$file = $(file);
var filename = fileElement[0].files[0].name;
person Himerzi    schedule 18.01.2013
comment
Если у меня есть такая строка FILEUPLOADS\city_sri\src\com\travelocityapp22\commonmodule\dto, то как разделить их с помощью '\' - person rolling stone; 26.05.2015

arrow_upward
3
arrow_downward

Экранируйте символ обратной косой черты.

foo.split('\\')
person Quentin    schedule 23.12.2011
comment
Ой, не уверен, что это проблема. Похоже, что ОП уже пробовал это (я смотрел на источник вопроса - и отредактировал его, чтобы показать его ясно) - person sidyll; 23.12.2011

arrow_upward
1
arrow_downward

Немного хакерский, но работает:

const input = '\text';
const output = JSON.stringify(input).replace(/((^")|("$))/g, "").trim();

console.log({ input, output });
// { input: '\text', output: '\\text' }

person Ashley Williams    schedule 02.07.2018

arrow_upward
0
arrow_downward

Добавьте идентификатор ввода к элементу и сделайте что-то вроде этого:

document.getElementById('inputId').value.split(/[\\$]/).pop()
person Yifat Biezuner    schedule 22.06.2016