Tworzenie podglądu obrazu na żywo (przed przesłaniem) za pomocą JQuery

Question

Chcę utworzyć podgląd obrazu przed przesłaniem go na serwer przy użyciu JQuery.

Mój kod, kod JS:

$(function(){ 
    Test = { 
     UpdatePreview: function(obj){ 
      // if IE < 10 doesn't support FileReader 
      if(!window.FileReader){ 
      // don't know how to proceed to assign src to image tag 
      } else { 
      var reader = new FileReader(); 
      var target = null; 

      reader.onload = function(e) { 
       target = e.target || e.srcElement; 
       $("img").prop("src", target.result); 
      }; 
       reader.readAsDataURL(obj.files[0]); 
      } 
     } 
    }; 
}); 

Moje html:

<input type='file' name='browse' onchange='Test.UpdatePreview(this)' /> 
<br/><br/> 
    <img src="#" alt="test" width="128" height="128" /> 

Zobacz jsfiddle: http://jsfiddle.net/aAuMU/

Po onload widzę src obrazu (przy użyciu aplikacji konsoli Google) i wygląda to następująco:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...

Jest to sposób, aby uzyskać w javascript podstawę obrazu i przypisać do obrazu na wypadek, gdy używam IE jako przeglądarki?

FileReader nie działa w IE < 10.

Answer 1

Jeśli potrzebujesz go jako coraz ładny efekt następnie można użyć lampy błyskowej, jak oni w https://github.com/mailru/FileAPI

Ale kiedy potrzebne, aby pokazać obraz dla użytkownika ponieważ musiałem pozwolić użytkownikowi wybrać obszar do przycinania, a następnie użyłem formularza wewnątrz ukrytego elementu iframe i przesłałem obraz do serwera i wysłałem uri dane o obrazie, dzięki czemu mogłem uzyskać dane uri i zastąpić atrybut src obrazu, a następnie gdy obszar został wybrany, nie wyślij obraz jako plik, ale jako dane uri. W starych przeglądarkach oznacza to, że przesyłasz obraz dwukrotnie, ale nie chciałem używać lampy błyskowej, ponieważ w niektórych przypadkach flash może również nie zostać zainstalowany.

Answer 2

Zamiast

$("img").prop("src", target.result); 

zapisu

$("#ImageId").attr("src", target.result); 

Gdzie ImageId jest identyfikator Twojego img tag.