选择文件后立即POST

Question

我有以下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> 

给了我以下的东西。

我想知道

1. 如何使用JavaScript，以消除Submit按钮的需要。这意味着，一旦我Choose File，所选文件将立即上传？
2. 如何确保显示所选文件名的字段足够长，以便......不会显示？

Answer 1

要立即提交，请执行以下操作：

<input name="file_1" type="file" onchange="this.form.submit();">

如果您使用的是JQuery：

$("input[name='file_1']").change(function() { this.form.submit(); });

关于您的其他问题：

1）有很多方法......例如：

http://valums.com/ajax-upload/

http://www.webtoolkit.info/ajax-file-upload.html

（还有更多。只是google for：“Ajax文件上传”或“iframe文件上传”）

2）不要担心场地的宽度。因为你不知道这条路有多长，所以它永远不够长（我想）。浏览器也可能显示它非常不同。例如，Safari或Chrome显示它与Firefox或IE非常不同。只需使用默认长度或使用您的设计看起来更好的长度。

Answer 2

第一个：

<input name="file_1" type="file" onchange="this.form.submit()">

我不确定这个领域是否足够广阔。有时CSS会在文件上传字段中出现问题，以防止漏洞利用。

Answer 3

如果您不想或不需要在选择文件输入时提交整个表单，则可以执行此操作以仅发送文件：

N

$(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>的输入文件元素，然后附加到FormData，然后将FormData作为数据发送到ajax调用中。在ajaxupload.php中进行服务器端上载处理。

Answer 4

粗略猜测你想要什么 - 当文本字段改变时，它将触发表单提交

$('.target').change(function() {
  document.forms["myform"].submit();
});

编辑：抱歉，我使用过jQuery ......

如果您提交表格onchange，您将不会注意到该字段已填充，因此不需要更改文本长度。如果你愿意，我会在字段中获得字符串的字符数，然后将size属性应用于输入

mylength = document.getElementById('myfield').value
document.getElementById('myfield').size = mylength;