Drag and Drop Images into this example

[Total: 0    Average: 0/5]

This example shows how to set up Netscape (only!) to have a page where you can drag an image from your computer onto this page and have it show it and put it’s file location into the form textbox.

Head Code:

<STYLE TYPE=text/css>
  #displaysection  { position: absolute; z-index: 10; visibility: visible; left: 10px; top: 100px; }
  .TDMED           { font-size:  10pt; }
  TD               { font-size:  8pt; }
</STYLE>

<SCRIPT>

// SNIFFER
IE4  = (document.all)    ? 1 : 0;
NS4  = (document.layers) ? 1 : 0;
VER4 = (IE4 || NS4)      ? 1 : 0;

function f_external_drop(e)
 {
  var ls_file_url, ls_filename, ls_html;

  if (NS4)
   {
    netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
    netscape.security.PrivilegeManager.enablePrivilege('UniversalFileRead');

    ls_file_url = e.data[0];
    ls_filename = ls_file_url.substring(8).replace(/|/g, ':').replace(///g,java.lang.System.getProperty('file.separator'));
    document.forms[0].elements["inputfile"].value = ls_filename;
    if (e.data.length == 1 ) { f_view(); }
    else { f_multiview(e); }
   }

//  else
//   {
//    alert("IE, Popeye");
//   }

  return false;
}

window.ondragdrop = f_external_drop;

function f_rewrite(as_name, as_text)
 {
  if (NS4)
   {
    // NS4 - GET <DIV> (ie layers[]) NAME and rewrite document
    ls_eval = "document.layers['" + as_name +"'].document.open()";
    eval(ls_eval);
    ls_eval = "document.layers['" + as_name +"'].document.write(as_text)";
    eval(ls_eval);
    ls_eval = "document.layers['" + as_name +"'].document.close()";
    eval(ls_eval);
   }
  else
   {
    ls_eval = "document.all['" + as_name +"'].innerHTML='" + as_text + "'";
    eval(ls_eval);
   }
 }

function f_ieview()
 {
  if (IE4) { f_view(); }
 }

function f_nsview()
 {
  if (NS4) { f_view(); }
 }

function f_view()
 {
  var  ls_file, ls_html, ls_msg;
  var  li;

  ls_file = document.forms[0].inputfile.value;

  li = ls_file.indexOf("\");
  while (li > 0)
   {
    ls_file = ls_file.substr(0, li) + "/" + ls_file.substr(li + 1, ls_file.length - 1);
    li = ls_file.indexOf("\");
   }

   // ADD type file:///
   li = ls_file.indexOf(":");
   if (li > 0) { ls_file = "file:///"  + ls_file.substr(0, li) + "|" + ls_file.substr(li + 1, ls_file.length - 1);}

   ls_file = ls_file.toLowerCase();
   if ( ls_file.indexOf(".jpg") != -1 || ls_file.indexOf(".jpeg") != -1 || ls_file.indexOf(".gif") != -1 )
     {
     // GET img dimensions
     ls_msg   = "";
     limg     = new Image();
     limg.src = ls_file;
     ls_msg   = limg.src ;
     ls_msg  += " : W=" + limg.width + " : H=" + limg.height ;
     window.status = ls_msg;

     ls_html  = "<CENTER><TABLE BORDER=1 CELLSPACING=2 CELLPADDING=5 WIDTH=400><TR><TD><CENTER>";
     ls_html += ls_msg + "</CENTER></TD></TR>";
     ls_html += "<TR><TD><CENTER><IMG NAME=show SRC=" + limg.src + " SIZE=50%></CENTER></TD></TR>";
     ls_html += "</TABLE></CENTER>";
     f_rewrite("displaysection", ls_html);
     }
   else
     {
//    ls_eval = "document.layers['displaysection'].src=" + ls_file;
//window.status = ls_eval;
//alert(ls_eval);
//    eval(ls_eval);
     }
 }


function f_multiview(e)
 {
  var  ls_file, ls_html, ls_name, ls_contacts, ls_newrow;
  var  li;

  ls_html     = "";
  ls_contacts = "";
  for (li=0; li < e.data.length; li++)
   {
    ls_file = e.data[li]
    ls_file = ls_file.toLowerCase();

    if ( ls_file.indexOf(".jpg") != -1 || ls_file.indexOf(".jpeg") != -1 || ls_file.indexOf(".gif") != -1 )
     {
      ls_name      = ls_file.substring(ls_file.lastIndexOf("/") + 1, ls_file.length);
      ls_newrow    = "";
      if (li!=0 && li%4==0) { ls_newrow="</TR><TR>"; }
      ls_contacts += ls_newrow
      ls_contacts += "<TD VALIGN=bottom><CENTER>";
      ls_contacts += "<TABLE BORDER=1 BORDERCOLOR=blue CELLSPACING=0 BGCOLOR=white>";
      ls_contacts += "<TR><TD><CENTER>";
      ls_contacts += "  <IMG NAME=show SRC=" + ls_file + " WIDTH=64>";
      ls_contacts += "</CENTER></TD></TR>";
      ls_contacts += "<TR><TD><CENTER>" + ls_name + "</CENTER></TD></TR>";
      ls_contacts += "</TABLE></CENTER>";
      ls_contacts += "</TD>";
     }
    }
   lj = e.data.length%4
   if (lj%4 > 0 && e.data.length > 4)
    {
     lj = 4 - lj;
     for (li=0; li < lj; li++) { ls_contacts += "<TD>&nbsp;</TD>"; }
    }

   ls_html  = "<CENTER><TABLE BORDER=4 BORDER-STYLE=ridge CELLSPACING=2 CELLPADDING=5 WIDTH=400 BGCOLOR=#C0C0C0>";
   ls_html += "<TR>" + ls_contacts + "</TR>";
   ls_html += "</TABLE></CENTER>";

   f_rewrite("displaysection", ls_html);
 }


</SCRIPT>

Body Code:

<CENTER>

<DIV id=displaysection>&nbsp;</DIV>

<FONT SIZE=+1>

<FORM ENCTYPE=multipart/form data>
<TABLE BORDER=1>
  <TR>
    <TD CLASS=TDMED><INPUT TYPE=button VALUE=View onClick='f_view();' TABINDEX=10></TD>
    <TD><INPUT TYPE=file NAME=inputfile SIZE=80 onFocus='f_ieview();' onChange='f_nsview();' TABINDEX=20></TD>
  </TR><TR>
    <TD COLSPAN=2 CLASS=TDMED><CENTER>In Netscape Navigator you can <B>Drag and Drop</B> single or multiple images onto this page.</CENTER></TD>
  </TR>
</TABLE>
</FORM>


</FONT>
</CENTER>

<!-- NETSCAPE: Requires prerendered large size window for large images //-->
<TABLE WIDTH=200%><TR><TD></TD></TR></TABLE>
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;
<BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR>&nbsp;

Times Viewed: 7

Leave a Reply

Your email address will not be published. Required fields are marked *