Anzeige Datei-name für die benutzerdefinierte Stil-input-Datei mithilfe von jquery?

Ich habe gestylt, ein file-input mit CSS:

CSS:

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

HTML:

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

Alles ist in Ordnung, aber ich würde gerne die Anzeige der name der ausgewählten Datei. Wie ist das möglich mit CSS oder jQuery?

Mögliche Duplikate von ein Styling input type="file" button
Wenn man das name-Attribut im label - dann könnte das mit CSS mit der attr () - Funktion generierte Inhalte können nicht Hinzugefügt werden, um Eingabe-Elemente ). codepen.io/danield770/pen/XpmNYZ?Redakteure=1100#0

InformationsquelleAutor Dbb | 2017-01-09

Haben Sie zu binden und das auslösen des change-Ereignisses auf der [type=file] element und Lesen Sie die Dateien, die Namen wie:

JS:

$('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});

CSS:

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

Jai Das ist genau das, was ich wollte. Vielen Dank.
Sie sind herzlich willkommen. Froh, dass wir Ihnen geholfen hier...
+1 aber für mich es hat nicht funktioniert mit $('#Datei-upload')[0].files[0].Namen; aber es funktionierte mit $('#Datei-upload').files[0].name;

InformationsquelleAutor Jai

Müssen Sie den Namen der Datei bei der Eingabe ändern, und fügen Sie ihn in den html -. Im code this.files[0].name Namen der ausgewählten Datei.

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

JS:

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

CSS:

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer; 
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Upload Image
    </label>
    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
    <label id="file-name"></label>
</form>

Auch Sie können diese Arbeit mit reinem javascript

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

JS:

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

CSS:

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

HTML:

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
  <label id="file-name"></label>
</form>

InformationsquelleAutor Mohammad

7

Können Sie die Datei-Namen wie diese
```
$('#file-upload')[0].files[0].name
```
- Das ist das richtige kaufen ist nicht perfekt. Es erhalten nur die Dateinamen und Sie sollten es verwenden, wenn input festlegen und ändern getted Namen in htm.
InformationsquelleAutor Sharmila

Können Sie verwenden Sie diese für mehrere Datei-upload-auch

JS:

updateList = function() {
  var input = document.getElementById('file');
  var output = document.getElementById('fileList');

  output.innerHTML = '<ul>';
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
  }
  output.innerHTML += '</ul>';
}

HTML:

<input type="file" name="file" id="file" multiple 
       onchange="javascript:updateList()" />
<br/>Selected files:
<div id="fileList"></div>

InformationsquelleAutor Gokul P P

Für CSS Einzige Lösung

CSS:

.file_upload {
  position: relative;
  min-width: 90px;
  text-align: center;
  color: #ee3333;
  line-height: 25px;
  background: #fff;
  border: solid 2px #ee3333;
  font-weight: 600;
}

a.file_upload {
  display: inline-block;
}

.file_upload .btn_lbl {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.file_upload .btn_colorlayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
  pointer-events: none;
}

.file_upload input[type="file"] {
  position: absolute;
  top: 3px;
  left: -86px;
  font-weight: 600;
  margin-left: 100%;
  color: #ee3333;
  outline: none;
}

HTML:

<button class="file_upload" type="button">
      <span class="btn_lbl">Browse</span>
      <span class="btn_colorlayer"></span>
      <input type="file" name="fileupload" id="file_upload" />
    </button>

Hi, ich habe entfernt demo-link zu Ihrer Website, wie es vielleicht als spam angesehen. Ihre demo kann ungültig werden, wenn die verlinkte Seite gelöscht wird. Also, ich habe erstellt eine funktionierende snippet.

InformationsquelleAutor Growyour GK

Upload-button-Style

CSS:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

HTML:

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

Hervorragende Lösung!

InformationsquelleAutor user25775

Ich hatte einen langen Riss, ich hoffe, es hilft, können Sie brauchen, um Stil es mehr nach Ihren wünschen

HTML

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">
  <input id="uploadFile" placeholder="No File" disabled="disabled" />
</form>

CSS

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

#uploadFile {
  text-align: center;
  border: none;
  background-color: white;
  color: black;
}

JavaScript

document.getElementById("file-upload").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

JSFiddle link:https://jsfiddle.net/kd1brhny/

InformationsquelleAutor PloxPanda

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.