通過jquery從文件上傳字段中獲取值

Question

我有聯系表格，我在那里使用了文件上傳文件。 現在我想獲取值，這意味着 jQuery 從文件上傳字段獲取的路徑。 文件上傳字段具有名為 filebrowse 的類，我想存儲該值並在另一個輸入字段中回顯該值。 我用這段代碼來檢索路徑

var val = jQuery(".filebrowse").val();
console.log(val);
jQuery('.file-input').attr('value', val);

它有效，但沒有在輸入框字段中顯示值。 因為默認情況下輸入框是空的，所以什么也沒有顯示。 現在我想在一個瀏覽文件到文件上傳字段時在輸入框中顯示值。

Answer 1

你的意思是，獲取文件字段的值：

$('.filebrowse').change( function(){
    console.log( $(this).val() );
});

Answer 2

出於安全原因，無法設置文件輸入的值。 這將使惡意 javascript 有可能讓您設置文件，然后以編程方式提交表單，從而允許他們通過強制上傳竊取您系統上的任何文件，前提是他們知道文件的路徑。

編輯 - 嘿，我誤讀了問題並根據示例代碼進行了回答。 通常可以獲取文件輸入值的文件名，但出於安全原因，它不會包含路徑。

Answer 3

根據您的問題和陳述，有兩個部分獲取值（有效）並在另一個無效輸入中顯示該值。

根據您的 jquery 語法從輸入 type=file 中選擇值是正確的方法，但是順序很重要。 為確保 DOM 序列正確，將控件傳遞給函數，然后在 jquery 選擇器中使用它。

要么

確保您的 jquery 選擇器在文檔中准備就緒並綁定到更改事件。

選項 1：將更改事件的控制傳遞給函數。

 function fileUploadChanged(fileUploader) { let path = $(fileUploader).val(); console.log('Path:=', path); $('#fileSelectedOutput').val(path); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- FILE UPLOAD --> <input type="file" style="width;100%;" class="fu" id="fileUploader" name="fileUploader" onchange="fileUploadChanged(this)" /> <!-- OUTPUT --> <input id="fileSelectedOutput" type="text" />

選項 2：確保更改事件已綁定到准備就緒的文檔內的控件。

 $(document).ready(function() { $('#fileUploader').change(function() { let path = $(this).val(); console.log('Path:=', path); $('#fileSelectedOutput').val(path); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- FILE UPLOAD --> <input type="file" style="width;100%;" class="fu" id="fileUploader" name="fileUploader" /> <!-- OUTPUT --> <input id="fileSelectedOutput" type="text" />

Answer 4

我知道這篇文章有點舊，但這是我需要在 MVC 中做的。

<input type="file" style="width:100%;" class="fu" id="fileUploader" name="fileUploader" />

然后按類訪問它。

var fileValue = $('.fu').val();