zeige hochgeladene Bild vor dem Klick auf submit-button

Möchte ich zeigen Sie ein bereits hochgeladenes Bild vor dem Klick auf eine Schaltfläche "hochladen". Ich habe versucht, sondern seine nicht funktioniert, überprüfen Sie bitte meinen code unten. wenn ich wählen Sie ein Bild zu laden, dann kein Bild kommen und nach mit der Hilfe von firebug habe ich herausgefunden, dass mein code macht seltsame url. Sie können auch überprüfen, fiddle hier: http://jsfiddle.net/XdXLJ/

Skript

$(document).ready(function(e) {
    $('#upload').click(function(){
        $('input[type="file"]').show().focus().click().hide();
        $('input[type="file"]').change(function(){

            var val = $('this').val;
            $('.img').append('<img src="'+val+'" />')

            })
        })
})

HTML

<form id="form1" name="form1" method="post" action="">
<input name="" type="file" />
<div id="upload">Upload</div>
<div class="img"></div>
</form>

Stil

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;}
input[type="file"]{display:none;}
  • Dies wird nicht so funktionieren wie Sie es erwarten, weil in der Regel die browser-fakes den Pfad zu dem Bild vor dem hochladen. Um dies zu erreichen, werden Sie brauchen, um HTML5 nutzen oder eine andere Methode.
  • mögliche Duplikate von Vorschau eines Bildes vor dem hochladen
  • hat deine Anforderung benötigt, so dass es im IE funktioniert, wie auch? wenn ja, dann haben Sie speichern Sie das Bild irgendwo auf dem server vor der eigentlichen Formulars mit Hilfe von einigen anderen form
  • Betrachte ich nur IE9 und höher.. bitte teilen Sie irgendwelche Beispiele
InformationsquelleAutor Kamal | 2013-09-24
  1. 1

    wenn Ihre Forderung ist für die Arbeit in anderen Browsern als IE
    dann können Sie dieser link und es hat die perfekte Antwort für Sie

    aber wenn Ihre Forderung schließt auch IE
    dann machst du ein paar Schritte
    Schritt 1 : erstellen Sie eine andere form , eine andere als Ihre wichtigste form , diese andere form nicht innerhalb der main-form als form in einem form-cant eingereicht werden .

    Schritt 2 : in Ihrer neuen form zu halten

    <input type="file" name="imageFileChooser"/>

    Schritt 3 : im change-Ereignis der Datei Feld Aufruf einer ajax-Funktion

    Schritt 4 : diese ajax-Funktion sendet Ihre neue form mit nur dem Bild-Feld aus und speichert das Bild auf der server-Seite

    Schritt 5 : wenn Sie möchten, geben Sie die Vorschau des Formulars müssen Sie aufrufen, um die vorübergehend gespeicherte Bild von Ihrem server .

    Schritt 6 : nach der Vorschau und Vorlage unterbreiten, die Haupt-form und nehmen das Bild aus dem temporären Verzeichnis des Servers, oder Sie können auch halten eine versteckte Datei iput tag tragen die gleiche Datei .

    InformationsquelleAutor Hussain Akhtar Wahid 'Ghouri'
  2. 1

    in HTML: 

    <input type='file' onchange="readURL(this);" />

    Javascript/JQuery-durch die Art FileReader 

    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

    wo input ist die <input type="file"> element
    wenn Sie AjaxToolKit AsyncFileUpload, können Sie die Eingabe mit: fileUploadElement.get_inputFile()

    Bitte refere: wie, um die Vorschau eines Bildes vor und nach dem upload?

    InformationsquelleAutor Muhammad Omar ElShourbagy
Schreibe einen Kommentar