当文件输入中存在名称字段时，getElementById 不会发布答案

【问题标题】：getElementById does not post when name field is present in the file input当文件输入中存在名称字段时，getElementById 不会发布
【发布时间】：2012-04-29 11:43:50
【问题描述】：

我正在编写代码来一步浏览和上传文件。我有这段代码：

<input type="file" id="image" style="display: none;">
<input type="submit" name="upload" id="upload" value="upload"
  onclick="document.getElementById('image').click();">

此代码允许我选择文件并提交表单，但我想使用 $_FILE 属性，由于文件输入中没有名称字段，我无法访问文件信息。

所以我修改了我的代码添加名称字段如下

<input type="file" name="image" id="image" style="display: none;" />

<input type="submit" name="upload" id="upload" value="upload"
  onclick="document.getElementById('image').click();" />

现在，使用此代码，我仍然可以浏览文件，但未提交。所以简而言之，我无法使用这两种方法访问 $_FILE。

任何建议我可以做些什么来继续前进。 ??

TIA

【问题讨论】：

由于您没有发布任何代码，我们无法帮助您。
用代码更新了我的问题。
你不想重定向页面？
没有。我正在尝试上传闪烁等图像，所以我想同时浏览和上传图像。我的 PHP 代码在同一个文件中，用于处理上传和预览。如果我单独执行，即文件输入和提交，代码运行良好，但我想一步完成。

标签： php javascript html forms

【解决方案1】：

虽然我在这里不支持您的方法（它不会将标记与行为分开），但您可以尝试在 onclick 中添加 return true。

【讨论】：

【解决方案2】：

此代码无法跨浏览器运行。在 chrome 上，您不能在隐藏的 input[type=file] 元素上调用 click()。

即使您将其切换为可见，将click() 放入onclick 或onsubmit 处理程序也将不起作用 - 表单将不会与新文件值一起提交。这是一项安全功能。浏览器不希望你这样做。

Flash 可以为所欲为。查看 YUI Uploader 组件：http://developer.yahoo.com/yui/uploader/

【讨论】：

【解决方案3】：

如果您想在不重新加载页面的情况下上传文件，请使用 AJAX file upload jQuery plugin 上传文件，并将响应传递给回调，仅此而已。

It does not depend on specific HTML, just give it a <input type="file">
It does not require your server to respond in any particular way
It does not matter how many files you use, or where they are on the page

-- 尽量少用--

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

-- 或尽可能多--

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

【讨论】：

【解决方案4】：

据我了解，您只想 a) 隐藏浏览器特定的文件浏览控件并提供您自己的样式按钮，以及 b) 同时选择和上传文件（例如，在文件浏览对话框关闭时上传您的照片）。
在这种情况下，您需要这样的东西：

<form name="myForm" method="POST">
    <input type="file" name="image" id="image" 
        style="position: absolute; left: -1000px;"
        onchange="myForm.submit();" />
    <input type="button" name="upload" id="upload" value="upload"
        onclick="document.getElementById('image').click();" />
</form>

在 Chrome 中工作（不要隐藏文件输入，而是将其移到页面外）。如果其他浏览器有任何问题，我建议使用 jQuery。

高温

【讨论】：

【解决方案5】：

要使所选图像在 PHP 中的 $_FILES 数组中可用，您需要为文件字段指定名称属性并将表单的 enctype 设置为 multipart/form-data 以便浏览器正确发布。

<form action="some.php" method="post" enctype="multipart/form-data">
 <input type="file" id="image" name="image">
 <input type="button" value="select image" id="button">
</form>

为了能够在文件输入上仍然使用.click() 方法，它必须没有从文档中取出（即：display: none 不起作用），所以您可以使用：

input[type=file] {
 position: absolute; height: 0; width: 0; /* should be totally squashed */
 visibility: hidden; /* just in case */
}

然后您可以使用 JavaScript 打开选择对话框并提交表单

$('#button').click(function() {
  $('#image')[0].click();
});
$('#image').change(function() {
  $('form').submit();
});

（这里假设您的页面上有 jQuery，这是一个工作示例http://jsfiddle.net/steveukx/V4yE3/）

【讨论】：

enctype 有好几次让我失望了！

【解决方案6】：

<input type="file" id="image" onchange="yourForm.submit();">

【讨论】：