tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von ComFreek
ERLEDIGT
JA
ANTWORTEN
1
ZUGRIFFE
297
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.11.11 13:27 #1
    Avatar von Thomas_Jung
    Thomas_Jung Thomas_Jung ist offline Mitglied Brokat
    Registriert seit
    Jan 2004
    Beiträge
    333
    Hallo
    Ist es möglich wenn ein Bild zum Upload ausgewählt ist, es in Miniatur links anzuzeigen.
    (Damit man sieht was man bereits Ausgewählt hat.)

    HTML-Code:
    <html>
<head>
<title>Upload Script</title>
<script type="text/javascript">
function add_file_field(){
var container=document.getElementById('file_container');
var file_field=document.createElement('input');
file_field.name='images[]';
file_field.type='file';
container.appendChild(file_field);
var br_field=document.createElement('br');
container.appendChild(br_field);
}
</script>
</head>
<body>
<form action="action.php" method="post" enctype="multipart/form-data" name="mutiple_file_upload_form" id="mutiple_file_upload_form">
 <select name="ordner" size="1">
 <option value="thomas">thomas</option>
 <option value="carola">carola</option> 
 </select>
  <div id="file_container">
  <input name="images[]" type="file"  />
  <br />
  </div>
  <a href="javascript:void(0);" onClick="add_file_field();">Feld hinzufügen</a><br />
  <input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
    Gruß Thomas
     
    Shit doesn't happen, it's produced by an asshole - Ein Anwendungsbeispiel sagt mehr als 1000 Worte.
    Sieh es nicht als selbstverständlich an, dass Dir jemand hilft und uneigennützig sein Wissen mit Dir teilt.
    Zitieren Zitieren
  2. 28.11.11 19:22 #2
    Avatar von ComFreek
    ComFreek ComFreek ist offline [x] Let it be logic!
    tutorials.de Moderator
    Registriert seit
    Jun 2009
    Beiträge
    2.363
    Blog-Einträge
    4
    Hallo Thomas,

    das würde mit der JavaScript File API in HTML 5 gehen. Wenn du willst, kann ich dir ein Beispiel schreiben.
    Habe genau so ein Code-Schnipsel gerade gefunden:
    HTML-Code:
    <!doctype html>
<!--
  index.html
-->
<!--
  @author ComFreek
  @link http://www.tutorials.de
-->
<html>
  <head>
    <style type="text/css">
      div#divPreview
      {
        position: absolute;
        display: none;
      }
    </style>

    <script type="text/javascript" src="img_preview.js"></script>
    
    <meta charset="utf-8" />
    <title>Image preview with HTML5 File API</title>
    
  </head>
  
  <body>
    <h1>Image preview with HTML5 File API</h1>
    <hr />
    
    
    <fieldset>
      <legend>Image</legend>
      
      <input type="file" id="file_input" />
      <br />
      <a href="#" id="aShowPreview">Preview</a>
      <div id="divPreview">
        <img src="clear.gif" id="imgPreview" />
      </div>
      
    </fieldset>      
    
  </body>
</html>
    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

    // img_preview.js
/**
  *@author ComFreek
  *@link [url]http://www.tutorials.de[/url]
  */
 
var maxFileSize = 10000003333;
var imgMaxSize = 300;
var viewableFormats =
{
  "image/gif": true,
  "image/jpg": true,
  "image/jpeg": true,
  "image/png": true
};
 
/**
  * Displays an error
  * @param evt The event object from the FileReader
  */
function errorHandler(evt)
{
  alert("Error while reading the file as a data url:\n"+evt.target.error.code);
}
 
/**
  * Reads a file as a data URL using the FileReader
  * @param file The file object
  * @param callback A callback function to which the file and the event object will be passed
  */
function readFile(file, callback)
{
  var reader = new FileReader();
  reader.onload = function(evt)
  {
    if (typeof callback=="function")
      callback(file, evt);
  };
  reader.onerror = errorHandler;
  
  reader.readAsDataURL( file );
}
 
 
 
/**
  * Shows the image selected by the file input
  */
function showPreview(evt)
{
  var x = evt.pageX;
  var y = evt.pageY;
  
  document.getElementById("divPreview").style.display = "block";
  document.getElementById("divPreview").style.left = x+"px";
  document.getElementById("divPreview").style.top = y+"px";
  
  return false; // Do not submit the form!
}
 
/**
  * Hides the preview using style.display = "none"
  */
function hidePreview()
{
  document.getElementById("divPreview").style.display = "none";
}
 
/**
  * Loads the chosen image
  */
function handleFileSelect()
{
  document.getElementById("imgPreview").src = "clear.gif";
  
  var input = document.getElementById("file_input");
  
  if ( typeof FileReader=="undefined" || !input.files)
  {
    alert("Your browser doesn't support the HTML 5 File API!");
    return;
  }
  
  if ( input.files.length <= 0)
  {
    return;
  }
  
  var file = input.files[0];
  
  if ( file.size <= maxFileSize &&
       typeof viewableFormats[file.type] != "undefined" )
  {
    
    readFile(file, function(file, evt)
    { 
      var img = document.getElementById("imgPreview");
      img.src = evt.target.result;
 
      img.onload = function()
      {
        if (img.width > imgMaxSize)
        {
          img.width = imgMaxSize;
        }
      }
    });
  }  
}
 
/**
  * Handles the onLoad event
  */
window.onload = function()
{
  document.getElementById("aShowPreview").onmousemove = showPreview;
  document.getElementById("aShowPreview").onmouseout = hidePreview;
  document.getElementById("file_input").onchange = handleFileSelect;
}
    Damit's einwandfrei funktioniert, musst du es auf einem Server laufen lassen.
    Thomas_Jung bedankt sich. 
    mfg ComFreek

    Falls ich dir geholfen habe, würde ich mich über ein DANKE freuen!
    Kenn mich am besten aus in C++, WEB-Sprachen (PHP, HTML, JavaScript) und vllt. mehr
    [PHP] Überprüfen, ob Website erreichbar • Sicherheit in PHP-Codes schaffen • Google Chrome-Extension für tutorials.de • json_compress()
    Zitieren Zitieren
« Namen aller gecheckten Checkboxen in Textarea speichern | Kleine JS-Funktion funktioniert im Firefox nicht wie sie sollte »

Ähnliche Themen

  1. Vorschaubild
    Von elbe13 im Forum Photoshop
    Antworten: 15
    Letzter Beitrag: 21.05.10, 17:58
  2. Größeres Vorschaubild
    Von Ditche im Forum Photoshop
    Antworten: 4
    Letzter Beitrag: 08.11.09, 15:21
  3. Kein Vorschaubild zu sehen - FLV
    Von mkoeni1 im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 15.04.08, 15:48
  4. Vorschaubild eines Filmes
    Von redX im Forum PHP
    Antworten: 1
    Letzter Beitrag: 18.05.05, 11:29
  5. mouseover = vorschaubild wie im Anhang
    Von nitrobesim im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 24.04.05, 16:33