Πρώτα Βήματα - Web Development

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

YiannisF — Thu, 01 Nov 2007 07:46:11 GMT

Φίλε dimik, αν καταλαβαίνω καλά από τον κώδικά σου, το αρχείο ναι μεν δε σώζεται στο δίσκο, αλλά παρόλα αυτά γίνεται upload στον server και από εκεί στέλνεται πίσω στον browser του χρήστη. Αυτό που ζητούσα εγώ ήταν να μην ανεβαίνει η εικόνα στον server και να διαβάζεται κατευθείαν από το σκληρό του χρήστη και μάλιστα αμέσως μέτα την επιλογή της από το browse dialog box και όχι ύστερα από το πάτημα ενός κουμπιού τύπου "preview image". Έχω αρχίσει βέβαια να καταλήγω στο συμέρασμα ότι μάλλον αυτό είναι ανέφικτο, κυρίως για λόγους ασφαλείας (είναι λογικό να αποτρέπονται ενέργειες επί του σκληρού δίσκου του χρήστη). Σε ευχαριστώ πάντως για το post σου.

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

dimik — Fri, 26 Oct 2007 00:32:42 GMT

Έπαιξα λίγο με αυτό το θέμα και προσπάθησα να χρησιμοποιήσω .net αντι για BLOCKED SCRIPT

Παραθέτω το κώδικα, ελπιζω να ειμαι εντος θέματος ... :)

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
        <input type="file" id="filePicker" name="filePicker" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Default.aspx.vb
Imports System.Drawing
Imports System.Drawing.Imaging
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        If Not filePicker.PostedFile Is Nothing Then
            Dim file As HttpPostedFile = filePicker.PostedFile
            Dim stream As System.IO.MemoryStream
            Dim data(file.ContentLength) As Byte

            data(file.ContentLength) = New Byte()
            file.InputStream.Read(data, 0, file.ContentLength)
            stream = New System.IO.MemoryStream(data)

            Response.Clear()
            Response.Buffer = True
            Response.ContentType = "image/bmp"

            Response.BinaryWrite(data)
            Response.Flush()
            Response.End()
        End If
    End Sub
End Class

Φυσικά θέλει εξέλιξη , αλλά το bmp εμφανίζεται (και σε ie και firefox) χωρις να σώζεται κάπου στο δίσκο...

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

dimik — Thu, 25 Oct 2007 23:42:47 GMT

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

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

George J. Capnias — Thu, 25 Oct 2007 21:34:50 GMT

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

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

George J.

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

YiannisF — Thu, 25 Oct 2007 20:26:00 GMT

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

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

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

George J. Capnias — Thu, 25 Oct 2007 19:24:30 GMT

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

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

George J.

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

YiannisF — Thu, 25 Oct 2007 18:28:03 GMT

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

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

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

George J. Capnias — Thu, 25 Oct 2007 06:52:06 GMT

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.

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

George J. Capnias — Thu, 25 Oct 2007 06:13:20 GMT

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

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

George J.

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

anjelinio — Thu, 25 Oct 2007 05:18:48 GMT

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

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

anjelinio — Thu, 25 Oct 2007 01:57:36 GMT

Λοιπόν παιδιά, αναρωτιέστε ποτέ γιατί ξέπεσε η 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 ... Θα κοιτάξω λίγο ακόμα αργότερα, και βλέπουμε.

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

dimik — Thu, 25 Oct 2007 00:40:37 GMT

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

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

anjelinio — Thu, 25 Oct 2007 00:20:54 GMT

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

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

YiannisF — Wed, 24 Oct 2007 23:06:52 GMT

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

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

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

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

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

anjelinio — Wed, 24 Oct 2007 20:52:04 GMT

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

<!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>