Javascript 选择文件后立即POST
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4730666/
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
POST immediately after select a file
提问by Cheok Yan Cheng
I have the following HTML code
我有以下 HTML 代码
<form action="/script/upload_key.py" method="POST" enctype="multipart/form-data">
Key filename: <input name="file_1" type="file">
<input name="submit" type="submit">
</form>
which gives me the following stuff.
这给了我以下内容。
I was wondering
我想知道
- How I can use JavaScript, to eliminate the need of
Submitbutton. That's mean, once IChoose File, the selected file will be uploaded immediately? - How can I make sure the field to display selected file name is long enough, so that ... will not be shown?
- 我如何使用 JavaScript 来消除
Submit按钮的需要。那是说，一旦我Choose File，选定的文件将立即上传？ - 如何确保显示所选文件名的字段足够长，以便...不会显示？
回答by lepe
To submit it immediately, just do this:
要立即提交，只需执行以下操作：
<input name="file_1" type="file" onchange="this.form.submit();">
If you are using JQuery:
如果您使用的是 JQuery：
$("input[name='file_1']").change(function() { this.form.submit(); });
About your other questions:
关于您的其他问题：
1) There are many methods out there... for example:
1）有很多方法......例如：
http://valums.com/ajax-upload/
http://valuems.com/ajax-upload/
http://www.webtoolkit.info/ajax-file-upload.html
http://www.webtoolkit.info/ajax-file-upload.html
(and many more. Just google for: "Ajax file upload" or "iframe file upload")
（还有更多。只需谷歌搜索：“Ajax 文件上传”或“iframe 文件上传”）
2) Don't worry about the width of the field. As you don't know how long can it be the path, it would never be long enough (i think). Also browsers may display it very different. For example Safari or Chrome show it very different from Firefox or IE. Just use the default length or the one that looks better with your design.
2）不要担心字段的宽度。因为你不知道这条路有多长，它永远不会足够长（我认为）。浏览器也可能显示它非常不同。例如，Safari 或 Chrome 显示它与 Firefox 或 IE 非常不同。只需使用默认长度或在您的设计中看起来更好的长度。
回答by ethmz
In case you don't want or need to submit the whole form on file input select, then you can do this to send only the file:
如果您不想或不需要在文件输入选择上提交整个表单，那么您可以这样做以仅发送文件：
$(document).ready(function (e) {
$("#uploadImage").on('change',(function(e) {
// append file input to form data
var fileInput = document.getElementById('uploadImage');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('uploadImage', file);
$.ajax({
url: "ajaxupload.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data) {
if(data=='invalid') {
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else {
// view uploaded file.
$("#preview").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e) {
$("#err").html(e).fadeIn();
}
});
}));
});<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="uploadImage">
<input class="btn btn-success" type="submit" value="Upload">
<div id="err"></div>
</form>So first you get the input file element with getElementById(), then you append to FormData, then send the FormData as data in your ajax call. Do the server side upload processing in ajaxupload.php.
因此，首先您使用 获取输入文件元素getElementById()，然后附加到 FormData，然后将 FormData 作为数据发送到您的 ajax 调用中。在ajaxupload.php中做服务端上传处理。
回答by scragz
For the first one:
对于第一个：
<input name="file_1" type="file" onchange="this.form.submit()">
I'm not sure about making the field wide enough though. Sometimes CSS is crippled on file upload fields to prevent exploits.
不过，我不确定是否使场地足够宽。有时，CSS 在文件上传字段上被削弱以防止漏洞利用。
回答by dpmguise
Rough guess at what you want - when the text field changes it will trigger the form submission
粗略猜测您想要什么 - 当文本字段更改时，它将触发表单提交
$('.target').change(function() {
document.forms["myform"].submit();
});
Edit: Sorry, I've used jQuery...
编辑：对不起，我用过 jQuery ...
If you submit the form onchange, you won't notice the field get populated and therefore should not need to change the text length. If you desire to, I would get the character count of the string in the field and then apply a size attribute to the input
如果您提交表单 onchange，您不会注意到该字段被填充，因此不需要更改文本长度。如果您愿意，我会获取字段中字符串的字符数，然后将大小属性应用于输入
mylength = document.getElementById('myfield').value
document.getElementById('myfield').size = mylength;
