預覽圖像上傳了多張圖片

Question

我希望能夠在形式預覽圖片，上載，我已經定製<input type="file">像

我需要加內用圖像來代替矩形前

我該怎麼做？
這是我的HTML和CSS http://jsfiddle.net/YJG79/2/

Answer 1

是的，你可以在上傳表單

試試這個Example

由於之前顯示的圖像的預覽。

---

更新了答案：

試試這個JSFiddle example

HTML

<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> 
     </div> 
    </fieldset> 
</form> 

JQuery的：

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") 
}); 

CSS：

.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(http://i.imgur.com/AeUEdJb.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; 
}