Wyświetlenie wybranego obrazu PHP przed przesłaniem

Question

Używam biblioteki przesyłania Codeigniter do przesyłania zdjęć dla awatarów użytkownika. Używam także Jcrop, która pozwala użytkownikom wybrać obszar do przycięcia.

http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg

ja ratuję wszystkie współrzędne wybranego obszaru w wejściach tekstowych, które użyję w php przyciąć.

Czy można wyświetlić obraz wybrany przed przesłaniem?

Prześlij formularz:

<?php echo form_open_multipart('upload/do_upload');?> 

<input type="file" name="userfile" size="20" /> 

<input type="submit" value="upload" /> 

</form> 

miarę możliwości staram się unikać ciężkich js dla tej lub przesyłając 2 razy. Przy wyborze pliku widzę, że to pokazuje jej nazwy:

Czy istnieje sposób, aby użyć tej funkcji, aby pobrać ścieżkę obrazu, jak również (ścieżkę do obrazu w komputerze, który przesłał)? Teoretycznie będę mógł użyć tego w tagach graficznych i wyświetlić obraz bez js.

Answer 1

Żeby było jasne, nie jesteś przesyłając plik dwukrotnie w bieżącym rozwiązanie, prawda? Przesyłasz tylko jeden raz, przechowując go w tymczasowej lokalizacji, wyświetlając go na stronie przycinania, a następnie wysyłając parametry upraw z powrotem do drugiej akcji.

Tradycyjnie nie było sposobu na dostęp do zawartości pliku lub wartości formularza przesyłania plików. Wystąpiłoby zagrożenie bezpieczeństwa, pozwalając stronie internetowej poznać strukturę twojego systemu plików. (Czy jesteś w systemie Windows, na koncie administratora, ...?) Eons temu mogłeś to zrobić, ale mamy mądrość.

The File API introduced in HTML5 umożliwia dostęp do plików bez ujawniania tych informacji, a tam są jakieś fajne opcje dostępne dla aplikacji po stronie klienta, najważniejsze z nich to własność wejście plików i URL.createObjectURLfiles.

Po zmianie formularza wewnętrzna reprezentacja pliku (ów) w danych wejściowych jest wyświetlana za pomocą obiektu fileInput.files, który jest obiektem FileList. Istnieją interfejsy API, w których można odczytać bajty, ale chcemy ustawić je jako źródło obrazu.

Ponieważ plik nie jest adresem URL, URL.createObjectURL tworzy wirtualny adres URL wokół pliku, który może być używany tylko na stronach i elementach iframe tego samego pochodzenia. Ustawić obraz tego, czym onload, cofnąć URL i kopać swoją jQuery przycinania wtyczki:

input.addEventListener('change', function() { 
    preview.src = URL.createObjectURL(this.files[0]); 
}); 

preview.addEventListener('load', function() { 
    URL.revokeObjectURL(this.src); 

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height); 
}); 

Wypróbuj this jsFiddle przynajmniej w Chrome i Firefox. Nie jest to oczywiście rozwiązanie dla wszystkich przeglądarek, ale jest to świetny sposób na ulepszenie go dla przeglądarek, które go obsługują.

Answer 2

Możesz to zrobić za pomocą css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), ale będzie to niezwykle trudne do zintegrowania z jcrop ...

Polecam po prostu, aby użytkownik czekał, aż zostanie załadowany. To właśnie Facebook i większość innych stron internetowych umożliwiających przycinanie.

W żadnym wypadku nie przyspieszy to procesu przesyłania, więc nie ma aż tak wiele powodów, aby to zrobić.

Nie można uzyskać pełnej listy plików. Byłby to problem bezpieczeństwa: http://forums.asp.net/t/1077850.aspx/1

Answer 3

Cóż, możesz użyć innej biblioteki przycinarek, która ma podgląd podobny do tego, który ma defekt.

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/