使用jquery从文件上传字段中获取值

6kkfgxo0  于 2022-12-18  发布在  jQuery
关注(0)|答案(4)|浏览(151)

我有联系人表单,在那里我使用了一个文件上传文件。现在我想通过jQuery从文件上传字段中获取表示路径的值。文件上传字段包含名为filebrowse的类,我想存储该值并在另一个输入字段中回显该值。我使用此代码检索路径

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

它的作品,但它didnot显示值在输入框字段. becoz默认输入框是空的,所以它显示nothing.现在我想显示值在输入框当一个浏览文件到文件上传字段.

mpgws1up

mpgws1up1#

您的意思是,获取文件字段的值:

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

egmofgnx2#

由于安全原因,设置文件输入的值是不可能的,这会让恶意的javascript让你设置文件,然后通过编程提交表单,允许他们通过强制上传窃取你系统上的任何文件,只要他们知道文件的路径。
编辑-呵呵,我误读了问题,并根据示例代码进行了回答。通常可以获得文件输入值的文件名,但出于安全原因,它不会包括路径。

bjg7j2ky

bjg7j2ky3#

根据你的问题和陈述,有两个部分获取值(工作)和在另一个输入中显示值不工作。
按照jquery语法从input type=file中选择值是正确的方法,但是顺序很重要。为了确保DOM顺序正确,请将控件传递给函数,然后在jquery选择器中使用它。

确保您的jquery选择器在文档内部就绪并绑定到change事件。
选项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:确保变更事件绑定到文档就绪内部的控件。
一个二个一个一个

hc8w905p

hc8w905p4#

我知道这篇文章有点旧,但这是我需要在MVC中做的。

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

然后通过类访问它。

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

相关问题