POST unmittelbar nach Auswahl einer Datei

Ich habe den folgenden HTML-Code

<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> 

was mir folgendes Zeug gibt.

Ich frage mich

1. Wie kann ich JavaScript verwenden, um die Notwendigkeit von zu beseitigen Submit Taste. Das ist gemein, sobald ich Choose Filedie ausgewählte Datei wird sofort hochgeladen?
2. Wie kann ich sicherstellen, dass das Feld zum Anzeigen des ausgewählten Dateinamens lang genug ist, sodass … nicht angezeigt wird?

Um es sofort einzureichen, tun Sie einfach Folgendes:

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

Wenn Sie JQuery verwenden:

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

Zu deinen anderen Fragen:

1) Es gibt viele Methoden da draußen … zum Beispiel:

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

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

(und viele mehr. Googlen Sie einfach nach: “Ajax-Datei-Upload” oder “Iframe-Datei-Upload”)

2) Machen Sie sich keine Sorgen über die Breite des Feldes. Da Sie nicht wissen, wie lang der Weg sein kann, wäre er nie lang genug (glaube ich). Auch Browser können es sehr unterschiedlich darstellen. Zum Beispiel Safari oder Chrome zeigen es ganz anders als Firefox oder IE. Verwenden Sie einfach die Standardlänge oder diejenige, die besser zu Ihrem Design passt.

Falls Sie bei der Auswahl der Dateieingabe nicht das gesamte Formular senden möchten oder müssen, können Sie dies tun, um nur die Datei zu senden:

$(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>

Sie erhalten also zuerst das Eingabedateielement mit getElementById(), dann hängen Sie an FormData an und senden dann die FormData als Daten in Ihrem Ajax-Aufruf. Führen Sie die serverseitige Upload-Verarbeitung in ajaxupload.php durch.

Für den ersten:

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

Ich bin mir nicht sicher, ob ich das Feld breit genug machen soll. Manchmal wird CSS in Datei-Upload-Feldern lahmgelegt, um Exploits zu verhindern.

Schätzen Sie grob, was Sie wollen – wenn sich das Textfeld ändert, wird es die Formularübermittlung auslösen

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

Bearbeiten: Entschuldigung, ich habe jQuery verwendet …

Wenn Sie das Formular bei einer Änderung absenden, werden Sie nicht bemerken, dass das Feld ausgefüllt wird, und sollten daher die Textlänge nicht ändern müssen. Wenn Sie möchten, würde ich die Zeichenanzahl der Zeichenfolge im Feld abrufen und dann ein Größenattribut auf die Eingabe anwenden

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