carga de imágenes múltiples y vista previa

Question

Dec 26, 2013, 07:09 AM

jquery html5 css image-upload javascript

carga de imágenes múltiples y vista previa

Estoy aprendiendo a subir varias imágenes y mostrando su vista previa ...

Me encontré con el siguiente código

<html>
<head>
<style>
.input-file-row-1:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.input-file-row-1{
display: inline-block;
margin-top: 25px;
position: relative;
}

#preview_image {
display: none;
width: 90px;
height: 90px;
margin: 2px 0px 0px 5px;
border-radius: 10px;
}

.upload-file-container { 
position: relative; 
width: 100px; 
height: 137px; 
overflow: hidden;   
background: url('images/picplus.png') top center no-repeat;
float: left;
margin-left: 23px;
} 

.upload-file-container-text{
font-family: Arial, sans-serif;
font-size: 12px;
color: #719d2b;
line-height: 17px;
text-align: center;
display: block;
position: absolute; 
left: 0; 
bottom: 0; 
width: 100px; 
height: 35px;
}

.upload-file-container-text > span{
border-bottom: 1px solid #719d2b;
cursor: pointer;
}

.one_opacity_0 {
opacity: 0;
height: 0;
width: 1px;
float: left;
}
</style>
<script>
function readURL(input,target)
{
if(input.files && input.files[0])
{
var reader=new FileReader();
var image_target=$(target);
reader.onload=function(e)
{
    image_target.attr('src',e.target.result).show();
};
reader.readAsDataUrl(input.files[0]);
}
}

$("patient_pic").live("change",function(){
readURL(this,"#preview_image")
});
</script>

</head>

<body>
<form name="" method="post" action="#" class="feedback-form-1">
<fieldset>
    <div class="input-file-row-1">
        <div class="upload-file-container">
            <img id="preview_image" src="#" alt="" />
            <div class="upload-file-container-text">
                <div class = 'one_opacity_0'>
                    <input type="file" id="patient_pic" label = "add" />
                </div>
                <span> Add Photo </span>
            </div>

<div class="upload-file-container-text">
                <div class = 'one_opacity_0'>
                    <input type="file" id="patient_pic" label = "add" />
                </div>
                <span> Add Photo </span>
            </div>

</div>
    </div>
</fieldset>
</form>
</body>

</html>

Me encontré con estohttp://jsfiddle.net/dn9Sr/2/ (violín) lo que me lo explica perfectamente. Pero ser un principiante, sé que incluye una biblioteca de jquery que se muestra claramente en la extensión del marco de Fiddle. ahora mi problema es ¿Cómo debo incluirlo exactamente cuando comienzo la codificación en mi máquina?

lo que se incluirá en la sección de cabecera () para hacer una llamada a la biblioteca ... gracias