Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]Użycie pluginu uploadu
Forum PHP.pl > Forum > Przedszkole
viamarimar
Pytanie:Jak użyć pluginu:
https://github.com/kartik-v/bootstrap-fileinput

Robie tak: na gorze strony:
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
  3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  4. <!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
  5. This must be loaded before fileinput.min.js -->
  6. <script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
  7. <script src="path/to/js/fileinput.min.js"></script>
  8. <!-- bootstrap.js below is only needed if you wish to the feature of viewing details
  9. of text file preview via modal dialog -->
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
  11. <!-- optionally if you need translation for your language then include
  12. locale file as mentioned below -->
  13. <script src="path/to/js/fileinput_locale_<lang>.js"></script>


I jakies przykladowe...

  1. <form enctype="multipart/form-data">
  2. <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
  3. <br>
  4. <button type="submit" class="btn btn-primary">Submit</button>
  5. <button type="reset" class="btn btn-default">Reset</button>
  6. </form>
  7. <hr>
  8. <form enctype="multipart/form-data">
  9. <label>Test invalid input type</label>
  10. <input id="file-0b" class="file" type="text" multiple data-min-file-count="1">
  11. <script>
  12. $(document).on('ready', function(){$("#file-0b").fileinput();});
  13. </script>
  14. </form>
  15. <hr>
  16. <form enctype="multipart/form-data">
  17. <input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
  18. <hr>
  19. <div class="form-group">
  20. <input id="file-0b" class="file" type="file">
  21. </div>
  22. <hr>
  23. <div class="form-group">
  24. <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
  25. </div>
  26. <hr>
  27. <div class="form-group">
  28. <input id="file-2" type="file" class="file" readonly data-show-upload="false">
  29. </div>
  30. <hr>
  31. <div class="form-group">
  32. <label>Preview File Icon</label>
  33. <input id="file-3" type="file" multiple=true>
  34. </div>
  35. <hr>


Tylko css ani js tego nie lapie , dlaczego?

Scieżki sa na 100% poprawne
trueblue
Pliki js i css wrzuciłeś do: path/to/css/ ?
viamarimar
tak
trueblue
Chrome->F12->Zakładka Console.
Pokaż jakie są błędy.
viamarimar
Uncaught ReferenceError: $ is not defined(anonymous function) @ dodaj.html:452
dodaj.html:503 GET file:..../img/loading.gif net::ERR_FILE_NOT_FOUND
trueblue
Wygląda na to, że uruchamiasz ten plik poprzez protokół plików (np.: file:///C:/....), a nie adres serwera lokalnego (http://localhost/).

viamarimar
Fajna sprawa z tą konsola w chromie, caly czas bawilem sie w firefoxsie, chodz efekt podobny tu jakos szybciej odczytac bledy, i poprawic.

Zostalo mi coś takiego:
  1. Uncaught TypeError: previewCache._init is not a functionFileInput._init @ fileinput.js:622FileInput @ fileinput.js:540(anonymous function) @ fileinput.js:2602m.extend.each @ jquery.js:2m.fn.m.each @ jquery.js:2$.fn.fileinput @ fileinput.js:2593(anonymous function) @ fileinput.js:2758j @ jquery.js:2k.fireWith @ jquery.js:2m.extend.ready @ jquery.js:2J @ jquery.js:2
trueblue
Może to: https://github.com/kartik-v/bootstrap-fileinput/issues/255

P.S. <script src="path/to/js/fileinput_locale_<lang>.js"></script>
viamarimar
to nic nie zmienia ;/


http://plugins.krajee.com/file-basic-usage-demo

w zaden sposob nie moge zrobic by to dzialo jak w przykladach

o ile css zaczol dzialac to JS nie oO
trueblue
Co nic nie zmienia? Próbowałeś tak jak w linku sugerowano przenieść pliki js przed zamknięcie body?
viamarimar
Tak probowalem przeniesc js przed body.

- CSS zaczoł się wczytywać(po wyeliminowaniu kilku błędów z tej konsoli).
- Nie działa to, że po wybraniu obrazka w polu upload (czyli w tym pluginie) -> nie działa dalsza część ajaxowa/js czyli wyświetlenei zdjęć i możliwość ich usunięcia
Nie pokazuje jakie to zdjęcia są uploadowa, null


@Uzylem wesji plugina z przed dwoch lat i dziala a to mi wystarczy na moje potrzeby, dzieki za pomoc smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.