✔ Vorschaubild vor dem Uploaden

Thomas_Jung · 28. November 2011

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:

<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

ComFreek · 28. November 2011

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:

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

Javascript:

// img_preview.js
/**
  *@author ComFreek
  *@link http://www.tutorials.de
  */

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.

✔ Vorschaubild vor dem Uploaden

Thomas_Jung

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

Neue Beiträge