Άμεση εμφάνιση εικόνας

	Καλώς ορίσατε στο dotNETZone.gr - Σύνδεση \| Εγγραφή \| Βοήθεια σε

Îåêßíçóå áðü ôï ìÝëïò YiannisF. Τελευταία δημοσίευση από το μέλος YiannisF στις 01-11-2007, 00:46. Υπάρχουν 16 απαντήσεις.

Σελίδα 1 από 2 (17 εγγραφές) 1 2 >
	Ταξινόμηση Δημοσιεύσεων: Προηγούμενο Επόμενο

24-10-2007, 03:53 36539

YiannisF
Μέλος από τις 08-12-2006
Athens
Δημοσιεύσεις 20

Άμεση εμφάνιση εικόνας

Καλησπέρα,

Προσπαθώ εδώ και πολλή ώρα να βρω ένα τρόπο να κάνω το εξής:

σε μια aspx σελίδα έχω συμπεριλάβει ένα FileUpload control, προκειμένου να μπορούν οι χρήστες να ανεβάζουν φωτογραφίες. Θέλω όταν ο χρήστης επιλέξει μία φώτο να μπορεί να την κάνει preview, πατώντας πχ ένα κουμπί "preview images". Θέλω δλδ να μπορεί να δει την εικόνα στη σελίδα πρωτού την αποθηκέυσει στη βάση. Η πρώτη σκέψη που έκανα είναι να πάρω το full path από την κάθε φώτο και να το περάσω σε ένα image control. Το πρόβλημα με αυτό είναι ότι το property PostedFile.FileName του FileUpload control επιστρέφει στον κώδικα μόνο το όνομα αρχείου και όχι ολόκληρο το path (αυτό μόνο όταν πρόκειται για firefox, από ότι κατάλαβα για λόγους security, ενώ ο ie το δείχνει κανονικά).

Υπάρχει κάποιος άλλος τρόπος ο οποίος να δουλεύει σε όλους τους browsers;

Επίσης, υπάρχει μήπως τρόπος να πιάσω το κλικ του κουμπιού OK του open dialog (το οποίο ανοίγει πατώντας το browse ενός FileUpload control) και να εκτελέσω server side κώδικα;

.::yf::.

Δημοσίευση στην κατηγορία: ASP.NET, image, FileUpload

Αναφορά Κακοποίησης

24-10-2007, 13:29 36551 σε απάντηση της 36539

anjelinio
Μέλος από τις 21-06-2005
Δημοσιεύσεις 571

Απ: Άμεση εμφάνιση εικόνας

Νομίζω ότι θα πρέπει να βρείς μια client-side λύση για αυτό, με Javascript που δίνει δυναμικά το path σε ένα <img> tag, μόλις επιλέξει κάποιος μια στο <input> σου. Αυτό κυρίως για 2 λόγους:

1. Ίσως είναι πιο εύκολο να βρείς το full path στον client
2. Αν χρησιμοποιήσεις το PostedFile.FileName ... έχει ήδη ανέβει ολόκληρο το αρχείο στο server σου, και σου τρώει μνήμη άδικα, μόνο και μόνο για να γεμίσεις ένα path σε ένα image control. Επίσης τρώει περισσότερο χρόνο - πρέπει να ανεβουν τα files στο server για να κάνεις preview. Κι αν μετά αποφασίσει ο φίλος μας ότι δε θέλει να σώσει τα μισά απο αυτά, έχεις κάνει τουλάχιστον 1 αρχείο post στο server άδικα.

Δυστυχώς δεν έχω το χρόνο αυτή τη στιγμή να δώ τι μπορείς να κάνεις με javascript σχετικά, μόλις βρώ λίγο χρόνο θα επανέλθω.

Angel
O:]

Αναφορά Κακοποίησης

24-10-2007, 13:52 36552 σε απάντηση της 36551

anjelinio
Μέλος από τις 21-06-2005
Δημοσιεύσεις 571

Απ: Άμεση εμφάνιση εικόνας

Τελικά ήταν αρκετά απλό όμως ....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">

        function filePickerChanged(oFilePicker){
alert("value changed");
            var filepath = oFilePicker.value;
            // Find the image control ...
alert("setting filepath: " + filepath);
            var oPreviewImg = document.getElementById("previewImg");
            oPreviewImg.src = filepath;
        }
    </script>
</head>
<body>
    <form action="#">
        <input type="file" id="filePicker" name="filePicker" onchange="filePickerChanged(this);" />
    </form>

    <img id="previewImg" src="dummy.gif" />
</body>
</html>

Angel
O:]

Αναφορά Κακοποίησης

24-10-2007, 16:06 36556 σε απάντηση της 36552

YiannisF
Μέλος από τις 08-12-2006
Athens
Δημοσιεύσεις 20

Απ: Άμεση εμφάνιση εικόνας

Angelinio, ευχαριστώ πολύ! Εξαιρετική η λύση αυτή. Πολύ καλό το γεγονός ότι δε γίνεται upload το αρχείο, το οποίο πράγματι θα μπορούσε να συμβαίνει χωρίς κανένα λόγο.

Το πρόβλημα είναι όμως ότι και αυτό δε μου δούλεψε σε firefox.

Ενώ η alert("setting filepath: " + filepath); εμφανίζει κανονικά το path (δλδ η var filepath = oFilePicker.value; δουλεύει μια χαρά), παρόλα αυτά κάποια εκ των var oPreviewImg = document.getElementById("previewImg"); ή oPreviewImg.src = filepath; φαίνεται να μη δουλεύει.

Μήπως υπάρχει καμιά λύση για αυτό;

.::yf::.

Αναφορά Κακοποίησης

24-10-2007, 17:20 36558 σε απάντηση της 36556

anjelinio
Μέλος από τις 21-06-2005
Δημοσιεύσεις 571

Απ: Άμεση εμφάνιση εικόνας

Έχεις δίκιο, το oPreviewImg.src = filepath; φαίνεται να θέτει μεν την τιμή, αλλά δεν γίνεται ποτέ update η εικόνα. Μόλις βρώ λίγο χρόνο ακόμα θα δώ γιατί, μάλλον θα χρειαστεί κάποιο pre-load πρίν αλλάξει το source o FireFox. Κι εκεί που έλεγα ότι πλέον ο FFox είναι πιο Explorer απ'τον Explorer ... ήρθαν και με διέψευσαν :P

Angel
O:]

Αναφορά Κακοποίησης

24-10-2007, 17:40 36562 σε απάντηση της 36558

dimik
Μέλος από τις 19-01-2007
Αθήνα
Δημοσιεύσεις 32

Απ: Άμεση εμφάνιση εικόνας

Hello ... πάντως αν βάλουμε <img id="previewImg" src="C:\Inetpub\wwwroot\help.gif" /> (για παράδειγμα) o firefox δεν εμφανίζει καν την εικόνα ... ενώ ο ie την εμφανίζει....

Σύνταξη στα 18,
Στράτευση στα 100.

Αναφορά Κακοποίησης

24-10-2007, 18:57 36565 σε απάντηση της 36562

anjelinio
Μέλος από τις 21-06-2005
Δημοσιεύσεις 571

Απ: Άμεση εμφάνιση εικόνας

Λοιπόν παιδιά, αναρωτιέστε ποτέ γιατί ξέπεσε η Netscape, είναι επειδή το reference που δίνουν όσον αφορά τα javascript objects που σου δίνει ο browser είναι απλώς .. ανύπαρκτη ! Δυστυχώς το κληροδότησαν και στο Mozilla αυτό ... τους μισώ ! Τα μόνα που δίνουν είναι τα πάγια Javascript Reference / Javascript Guide & Gecko DOM reference ... τα οποία είναι άχρηστα αν ψάχνεις τα events που σου δίνει το Image object ... :S

Αν γράψεις την εικόνα ως <img id="previewImg" name="previewImg" src="dummy.gif" width="120" height="120"/> - προσοχή, πρέπει να υπάρχει το image - θα τη δείξει κατα τα φαινόμενα.

Κατα τ' άλλα, ο φίλος μας ο FFox, φαίνεται να αλλάζει το src ενός img μόνο αν έχεις κάνει preload την καινούργια εικόνα, και μόνο αν έχουν το ίδιο width & height. Αλλά δεν το πιστεύω αυτό, περισσότερο πιστεύω ότι έχω να γράψω χρόνια javascript Big Smile

... Θα κοιτάξω λίγο ακόμα αργότερα, και βλέπουμε.

Angel
O:]

Αναφορά Κακοποίησης

24-10-2007, 22:18 36572 σε απάντηση της 36565

anjelinio
Μέλος από τις 21-06-2005
Δημοσιεύσεις 571

Απ: Άμεση εμφάνιση εικόνας

Κουράστηκα να ψάχνω φίλο ... οπότε το άφησα στους ειδικούς ... Cool

Angel
O:]

Αναφορά Κακοποίησης

24-10-2007, 23:13 36573 σε απάντηση της 36572

George J. Capnias
Μέλος από τις 21-10-2004
Βάρη
Δημοσιεύσεις 5.398

Απ: Άμεση εμφάνιση εικόνας

Δεν έχω δει την σελίδα που έχετε φτιάξει, αλλά...

Δοκίμασε κάποιος να χρησιμοποιήσει path στο local μηχάνημα με τη μορφή file://c:\folder\filename.ext;
Βασικά, δεν θα έπρεπε ο browser να μπορεί να έχει πρόσβαση στον τοπικό δίσκο. Αν η σελίδα είναι στο server, τότε το τοπικό αρχείο είναι σε άλλο domain και για λόγους ασφαλείας και sandbox δεν θα πρέπει να μπορεί ο browser να έχει πρόσβαση, άρα καλώς δεν την δείχνει. Μπορεί να συμβαίνει στον IE γιατί έχετε επιτρέπει το active content από τον τοπικό δίσκο...

George J.

George J. Capnias: Χειροπρακτικός Υπολογιστών, Ύψιστος Γκουράρχης της Κουμπουτερολογίας
w: capnias.org, t: @gcapnias, l: gr.linkedin.com/in/gcapnias

Αναφορά Κακοποίησης

24-10-2007, 23:52 36574 σε απάντηση της 36573

George J. Capnias
Μέλος από τις 21-10-2004
Βάρη
Δημοσιεύσεις 5.398

Απ: Άμεση εμφάνιση εικόνας

To παρακάτω παίζει τοπικά και για τους δύο browsers, αλλά δεν εγγυάμαι ότι θα γίνεται αυτό και όταν η σελίδα ανέβει στο server:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled Page</title>
<script type="text/javascript" language="javascript"> 

function filePickerChanged(oFilePicker){ 
  alert("value changed"); 
  var filepath = oFilePicker.value; 
  alert("setting filepath: " + filepath); 
  
  var preImage = new Image(); 
  preImage.src = "file://" + filepath; 

  // Find the image control ... 
  var oPreviewImg = document.getElementById("previewImg");
  oPreviewImg.src = preImage.src; 
  oPreviewImg.width = preImage.width;
  oPreviewImg.height = preImage.height;
} 
</script>
</head>

<body>

<form action="#">
  <input type="file" id="filePicker" name="filePicker" onchange="filePickerChanged(this);" />
</form>
<img id="previewImg" name="previewImg" src="dummy.gif" width="100" height="120" />

</body>

</html>

George J.

Αναφορά Κακοποίησης

25-10-2007, 11:28 36587 σε απάντηση της 36574

YiannisF
Μέλος από τις 08-12-2006
Athens
Δημοσιεύσεις 20

Απ: Άμεση εμφάνιση εικόνας

Δοκίμασα την (πολλά υποσχόμενη) λύση του George J, αλλά ούτε και αυτή έπαιζε, ούτε σε ff, ούτε σε ie7. Να σημειώσω εδώ ότι τη σελίδα την βλέπω με χρήση του cassini, δεν ξέρω, μπορεί να φταίει και αυτό. Η αλήθεια είναι ότι και η προηγούμενη λύση δεν παίζει στον ie7 (ούτε βέβαια και σε ff), αλλά μόνο στον Internal Web Browser του Visual Studio 2005.

Θα συνεχίσω το ψάξιμο, αλλά κάτι μου λέει μου λέει ότι τελικά δε θα παίξει έτσι. Ίσως με AJAX??

.::yf::.

Αναφορά Κακοποίησης

25-10-2007, 12:24 36593 σε απάντηση της 36587

George J. Capnias
Μέλος από τις 21-10-2004
Βάρη
Δημοσιεύσεις 5.398

Απ: Άμεση εμφάνιση εικόνας

Νομίζω ότι είπα και στα δύο μηνύματά μου ότι πιθανώς δεν παίζει από το web server, λόγω ασφάλειας. Η σελίδα που σου έστειλα, δοκιμάστηκε σε local file system, παίζει και με τους 2 browsers και η αναφορά σε αυτό πιστεύω ότι ήταν ξεκάθαρη.

Η χρήση AJAX δεν θα νομίζω ότι μπορεί να βοηθήσει το εγχείρημά σου...

George J.

Αναφορά Κακοποίησης

25-10-2007, 13:26 36596 σε απάντηση της 36593

YiannisF
Μέλος από τις 08-12-2006
Athens
Δημοσιεύσεις 20

Απ: Άμεση εμφάνιση εικόνας

George J. ήσουν πράγματι απόλυτα σαφής.

Δεν είναι λοιπόν δυνατόν να υλοποιηθεί προεπισκόπιση μιας εικόνας ακριβώς μόλις την επιλέξει ο χρήστης από το σκληρό του δίσκο και πριν αποφασίσει ότι θέλει τελικά να την ανεβάσει στον server;

.::yf::.

Αναφορά Κακοποίησης

25-10-2007, 14:34 36602 σε απάντηση της 36596

George J. Capnias
Μέλος από τις 21-10-2004
Βάρη
Δημοσιεύσεις 5.398

Απ: Άμεση εμφάνιση εικόνας

Προσωπική άποψη είναι δεν απαιτείται να υλοποιηθεί αυτό το χαρακτηριστικό:

Από την στιγμή που ο χρήστης επιλέγει την εικόνα από παράθυρο explorer μπορεί να αλλάξει το view του παραθύρου σε thumbnails και έχει preview των εικόνων που έχει στο δίσκο του και να ανεβάσει όποια επιθυμεί...

George J.

Αναφορά Κακοποίησης

25-10-2007, 16:42 36606 σε απάντηση της 36602

dimik
Μέλος από τις 19-01-2007
Αθήνα
Δημοσιεύσεις 32

Απ: Άμεση εμφάνιση εικόνας

Δεν νομίζω ότι είναι σωστή αντιμετώπιση, η θεώρηση ότι ο χρήστης θα έχει λειτουργικό σύστημα που θα έχει thumbnail view....
Υποτίθεται ότι μια σελίδα web πρέπει να είναι λειτουργική ανεξαρτήτως αν ο χρήστης έχει Windows ή Linux ή Mac ...
Και γενικά μπορεί κάποιος να έχει έστω Windows 98 που δεν υπάρχει τέτοια επιλογή...

Σύνταξη στα 18,
Στράτευση στα 100.

Αναφορά Κακοποίησης

Σελίδα 1 από 2 (17 εγγραφές) 1 2 >

Με χρήση του Community Server (Commercial Edition), από την Telligent Systems