link HTML-Visualizza l'immagine dopo aver selezionato il nome file




inserire link in immagine jpg (3)

Questo può essere fatto usando HTML5, ma funzionerà solo nei browser che lo supportano. Ecco un example .

Ricorda che avrai bisogno di un metodo alternativo per i browser che non supportano questo. Ho avuto un sacco di successo con questo plugin , che toglie molto lavoro alle tue mani.

Possibile duplicato:
Anteprima di un'immagine prima che sia caricata

Ho una forma che mi permette di

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

per sfogliare e selezionare un file.

Quello che voglio fare è visualizzare quell'immagine immediatamente dopo che l'immagine è stata selezionata. E questo è prima che il pulsante "invia" sul modulo sia stato premuto in modo che l'immagine risieda quasi sicuramente sul lato Client. Può essere fatto?


Answer #1

Ecco qui:

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

script:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

Dimostrazione dal vivo


Answer #2

È possibile ottenere questo con il seguente codice:

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});

Demo: http://jsfiddle.net/ugPDx/





file-upload