我正在编写代码,只需一步即可浏览和上传文件。 我有这个代码:
<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
答案 0 :(得分:1)
要使所选图像在PHP的$ _FILES数组中可用,您需要为文件字段指定name属性,并将表单的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
将无效),因此您可以使用:< / p>
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/)
答案 1 :(得分:0)
虽然我不支持您的方法(它不会将标记与行为分开),但您可以尝试在return true
中添加onclick
。
答案 2 :(得分:0)
此代码不会跨浏览器工作。在Chrome上,您无法在隐藏的click()
元素上调用input[type=file]
。
即使将其切换为可见,将click()
置于onclick
或onsubmit
处理程序也无效 - 表单将不会使用新文件值提交。这是一项安全功能。浏览器不希望你这样做。
Flash可以做你想要的。查看YUI上传器组件:http://developer.yahoo.com/yui/uploader/
答案 3 :(得分:0)
如果您想在不重新加载页面的情况下上传文件,请使用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 :(得分:0)
据我了解,您只想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。
HTH
答案 5 :(得分:0)
<input type="file" id="image" onchange="yourForm.submit();">