jQuery 如何通过单击图像按钮上传新文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16210231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I upload a new file on click of image button
提问by Niths
I have got a task to upload new file from the click of image button. My code is
我有一项任务是通过单击图像按钮上传新文件。我的代码是
<label>File</lable>
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
On the click of this button I want to upload a new file.How can I do this? You can check my code from Demo
单击此按钮时，我想上传一个新文件。我该怎么做？您可以从Demo查看我的代码
回答by Sudhir Bastakoti
You could add a hidden file input field, like:
您可以添加一个隐藏文件输入字段，例如：
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/>
<input type="file" id="my_file" style="display: none;" />
And do:
并做：
$("input[type='image']").click(function() {
$("input[id='my_file']").click();
});
Demo:: Updated Fiddle
演示::更新小提琴
回答by Perlat Kociaj
There is no need for javascript just put the <input>and the <img>inside <label>make sure you hide the <input>like so:
不需要 javascript 只需把里面的<input>和确保你隐藏这样的：<img><label><input>
<label for="image">
<input type="file" name="image" id="image" style="display:none;"/>
<img src="IMAGE URL"/>
</label>
回答by Rasmus Bech
If you are looking for a cross-browser compatible solution you should check out plupload(http://www.plupload.com) it supports image buttons aswell from what i remember.
如果您正在寻找跨浏览器兼容的解决方案，您应该查看 plupload( http://www.plupload.com) 它支持图像按钮以及我记得的。
回答by Remo H. Jansen
you are using the wrong input, use file instead, if you want the button to loke like the circle in your code demo you will need to use CSS to change the way "submit" looks like. This has to be in a form:
您使用了错误的输入，请改用文件，如果您希望按钮看起来像代码演示中的圆圈，您将需要使用 CSS 来更改“提交”的样子。这必须是一种形式：
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"/>
<input type="submit" class="circle-btn"/>
<form>
I don't know what language are you using in the server-side (PHP, ASP.NET, etc) but you will need to create a page (for xample "upload_file.php" for php). You can easily find examples in google about how to create a page like that, just copy pasete the code:
我不知道您在服务器端使用什么语言（PHP、ASP.NET 等），但您需要创建一个页面（例如，php 的“upload_file.php”）。您可以在 google 中轻松找到有关如何创建这样的页面的示例，只需复制粘贴代码即可：
An example in PHP: http://www.w3schools.com/php/php_file_upload.asp
PHP 示例：http: //www.w3schools.com/php/php_file_upload.asp
Hope it helps :)
希望能帮助到你 ：）
回答by Supriti Panda
You can do this using css.
您可以使用 css 执行此操作。
Please check the 4th answer in this blog.
请检查此博客中的第 4 个答案。
You can use your image as background image of the .buttonclass.
您可以使用您的图像作为.button类的背景图像。
回答by user1087079
Supplement for DemoUser's answer, add .focus() works for me.
DemoUser 答案的补充，添加 .focus() 对我有用。
$("input[type='image']").click(function() {
$("input[id='my_file']").focus().click();
});
回答by Sandeep Rana
There is no need for javascript.
不需要 javascript。
Just place both <input type="file"> and <img src=""> inside a label.
Eg:
<label>
<input type="file" style="display:none">
<img src="">
</label>
This will work Just Fine
这将工作得很好
