代码之家 › 专栏 › 技术社区 › Ty W

jquery:如何获取文件上传输入字段的“值”

file-upload forms jquery javascript php

Ty W · 技术社区 · 15 年前

是否可以使用javascript/jquery确定用户是否为特定输入类型的字段选择了文件?

我为ExpressionEngine(基于PHP的CMS)开发了一个自定义字段类型,允许用户在AmazonS3上上传和存储文件,但最流行的EE托管服务将最大文件上传限制为20。我想允许用户上载20个文件,再次编辑条目以添加20个文件等。不幸的是,在编辑条目后,最初的20个文件有一个“替换此图像”文件输入字段,似乎正在排除上载新图像的可能性。提交表单时,我想通过javascript删除所有未使用的文件输入字段。

3 回复 | 直到 12 年前

Peter Bailey 15 年前

是-可以读取值,甚至可以绑定到 change 如果你愿意的话。

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    $('#tester').change( function()
    {
      console.log( $(this).val() );
    });
  });
  </script>
</head>

<body>

<input type="file" id="tester" />

</body>
</html>

但是,还有其他多个上载解决方案可能更适合您的需要,例如发布的bpterson76。

Peter Örneholm 15 年前

此代码将从表单中删除所有空文件输入,然后提交:

HTML:

<form action="#">
  <input type="file" name="file1" /><br />
  <input type="file" name="file2" /><br />
  <input type="file" name="file3" /><br />
  <input type="file" name="file4" /><br />
  <input type="file" name="file5" /><br />

  <input type="submit" value="Submit" />
</form>

JavaScript:

$(function() {
  $("form").submit(function(){
    $("input:file", this).filter(function(){
      return ($(this).val().length == 0);
    }).remove();
  });
});

例子: http://jsbin.com/axuka3/

bpeterson76 15 年前

为了我的目的,这个上传器工作得很好: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

使用它作为编码基础的好处是文件是异步上传的,因此一次不需要限制为20个。在用户搜索时进行上传有一个明确的用户界面优势。

如果你需要的话,调整大小也是一个不错的功能!

推荐文章

Scott-MEARN-Developer · FileReader()以角度返回未定义和伪路径

3 年前

Lamberto Fredrick Nababan · PHP/MySQL-在执行单个上载时输入两次数据

7 年前

Wai Yan Hein · 上传时,Laravel正在旋转图像

7 年前

Chris · 要在chrome中添加哪个标志才能不看到c:/fakepath

7 年前

Yu.Pan · 如何上载文件夹或找到替换文件夹的方法

7 年前

Karma Blackshaw · 文件输入类型的未定义索引[重复]

7 年前

TheSwiftGuy77 · 使用Swift 4将Pdf、Docx和图像文件上载到服务器

7 年前

acb1980 · 上次更新后,Safari(iOS和OS X)上的Ajax文件上传中断

7 年前

Marcus Grass · Django将文件保存到磁盘文件夹的最简单方法,无需使用模型

7 年前

ahmed · 使用Mysql在php//中上载图像时无法打开流

7 年前