Witam
Szukam i szukam i nie mogę znaleźć sensownego skrytpu , a szukam coś na wzór canvas. A mianowicie chodzi mi o to żeby po kliknieciu w przycisk browse (ale nie w upload ) obok pojawiło się zdjęcie /zdjęcia (multiupload) ale bez wgrywania na serwer.
Fajnie by było jakby miał jeszcze dodawania do bazy i resize zdjęcia oraz tworzenie ikonek.
Ale zadowole się samym pokazywaniem zdjęcia zaraz po kliknięciu w przycisk browse. Acha no i żeby działało na IE
Mam coś taiego ale niestety nie działa na IE i nie ma multiuploadu
<!DOCTYPE html> <http://december.com/html/4/element/html.html> <http://december.com/html/4/element/head.html> <http://december.com/html/4/element/meta.html charset="utf-8"/> <http://december.com/html/4/element/script.html> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); var url = URL.createObjectURL(e.target.files[0]); var img = new Image(); img.onload = function() { ctx.drawImage(img, 20, 20); } img.src = url; } </http://december.com/html/4/element/script.html> </http://december.com/html/4/element/head.html> <http://december.com/html/4/element/body.html> <http://december.com/html/4/element/h1.html>Test</http://december.com/html/4/element/h1.html> <http://december.com/html/4/element/input.html type="file" id="input"/> <canvas width="400" height="300" id="canvas"/> </http://december.com/html/4/element/body.html> </http://december.com/html/4/element/html.html>
http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834
Polecam to, bo fajne i przyjemne: http://www.dropzonejs.com/
fajne tylko ze ten dropzone i ten pierwszy nie działa pod ie9
tak naprawde chodzi mi o samo <input type="file" id="myfile" name="myfile" /> i żeby po kliknięciu w browse pojawiło sie zdjęcie na stronie z mozliwościa usunięcia-nie musi być już zadnych akcji w stylu wyślij,zmień,dodaj do bazy itd
Turson może ty pomożesz:)
skrypt do wgrywania do bazy , zmiany na miniaturki juz mam. Potrzebuje coś w stylu iframu lub canvas tzn.
chce żeby to działało na takiej zasadzie że jak wybiore zdjęcia z <input type="file[]" id="myfile" name="myfile" />
lub
<input type="file" id="myfile" name="myfile" />
<input type="file" id="myfile" name="myfile" />
<input type="file" id="myfile" name="myfile" />
to żeby od razu pojawiło w formularzu przed wysłaniem go na serwer i tyle. No i żeby była mozliwośc usunięcia go z formularza jak to nie to zdjęcie i już
Reasumując ma sie pojawić zdjęcie w formularzu bez przeładowania strony przed wysłaniem go na serwer. Acha i zeby działało przynajmniej na IE 9
Bez uploadu na serwer nie da rady. Nie można pobrać wartości z input file ze względu bezpieczeństwa (dostaniesz tylko nazwę pliku bez ścieżki).
Trzeba więc zrobić upload w tle, zwróconą ścieżkę do zuploadowanego pliku na serwerze wpisać do odpowiednich pól formularza i utworzyć <img> z tą ściężką.
Spróbuj tego: http://digitarald.de/project/fancyupload/ przy czym to korzysta z framework MooTools oraz flash.
@peklo, wsparcie dla IE9 z czasów Ćwieka jest wymaganiem? Od IE10 masz już dostępne natywne File API (na którym bazuje chociażby Dropzone). Ładnie to programujesz, a dla przeglądarek z epoki kamienia łupanego zostawiasz zwykły file input.
if (window.File && window.FileReader && window.FileList && window.Blob) { // Great success! All the File APIs are supported. } else { alert('The File APIs are not fully supported in this browser.'); }
ok dzięki za odpowieź ale chciałem zrobic żeby też działało na innych przegladarkach. Ale zawsze użytkownik może sobie podnieść przegladarke:)
A dla zainteresowanych mam fajny skrypt do wysyłania zdjęć który je ładuje do formularza w TLE:)
http://old.shift8creative.com/projects/agile-uploader/index.html
A jeszcze mam jedno pytanie jak zrobić monit na stronce jeśli np przeglądarka nie obługuje css czy html5?
http://modernizr.com/
ok dzieki
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)