2014-12-13 2 views
0

У меня есть загрузка и загрузка файла, и я хочу, чтобы он показывался в виде миниатюры.Показать выбранный файл в php

enter image description here

Здесь я хочу показать изображение как thumbnail.I гугле, но я не получил то, что я want.Please помощь ...

<script type="text/javascript"> 
    function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
     $('#test').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 

До сих пор не работает ...

Вставьте этот код в основной корпус.

<form id="form1" runat="server"> 
<input onchange="readURL(this);" type="file" /> 
     <img alt="Image Display Here" id="test" src="#" /> 
    </form> 
+0

Вы пример с помощью JQuery. Вы говорите, что это не работает. Если бы это работало, то использование jQuery было бы вариантом? – Vector

+0

Вы связались с jquery? консоль дает какие-либо ошибки – Billy

+0

Вот живой пример того, что вы пытались: http://jsfiddle.net/LvsYc/ Используете ли вы метод HTML5? –

ответ

2
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<img id="imagePreview"> 
<input id="uploadFile" type="file" name="image" class="img" />'; 
$(function() { 
$("#uploadFile").on("change", function() 
{ 
    var files = !!this.files ? this.files : []; 
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader   support 

    if (/^image/.test(files[0].type)){ // only image file 
     var reader = new FileReader(); // instance of the FileReader 
     reader.readAsDataURL(files[0]); // read the local file 

     reader.onloadend = function(){ // set image data as background of div 
      $("#imagePreview").css("background-image", "url("+this.result+")"); 
     } 
     } 
    }); 
    }); 

enter image description here

Смежные вопросы