HTML 4 Drag & Drop Picture to Textbox in IE - Result will be filename

Question

I have researched this topic to death but I have not found exactly what I need. Hopefully this discussion will help others as well.

Question: I am attempting to drag a picture from my desktop or folder and drop it into a textbox on my HTML page. The then result will list the filename. I really hope one of you can help me find a solution for my dilemma.

The closest solution to what I want to do is located at the following URL. I just haven't been able to implement either of them. Drag Drop Example!

Attempting to Implement:

<p id="1">&nbsp; 1)  Primary silkscreen layer <img src="../0_Images/blank.jpg" width="60" height="15">  File name: &nbsp;
  <input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;"  size="60" />
</p>

Entire Code Condensed:

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>     
        /*
            Common: #7100E1
            CTO: #8B4513
            HMP: #FF0000
            RoHS: #009900
            RX1: #CC6600
            Snqb: #0066CC   
        */      
        .bgcolor{background-color: #D2E8D2;} 

    .sidestopborder
        {
        border-style:solid solid none solid;
        }
    .sideborder
        {
        border-style:none solid none solid;
        }
    .BottomBorder
        {
        border-style:none none solid none;
        font-family: Arial, Helvetica, sans-serif;  
        -height: 1.5em;
        }
    .Topborder
        {
        border-style:solid none none none;
        }
    .Rightborder
        {
        border-style:none solid none none;
        }
    .Leftborder
        {
        border-style:none none none solid;
        }
    .style2 {
        font-family: Arial, Helvetica, sans-serif;  
        -height: 1.5em;
        }
}
    .style4 {font-family: Arial, Helvetica, sans-serif; -height: 1.6em; font-weight: bold; }

#block_container    
#block1, #block2
{
    display:inline;
}        
#block3, #block4
{
    display:inline;
}         
#block5, #block6
{
    display:inline;
}      
#block7, #block8
{
    display:inline;
}    
    </style>
    <script>
     att = $('#gal1_img1').attr('src');
 $("a[rel*='lightbox[job1]']").attr('href',att);
</script>
</head>
<body onload='init()'>

<script type="text/javascript" src="file://///namp-dsk-003/cim-cam/CAM/BOI/Abi/680/Common_Files/jquery-1.11.1.js">

</script>

<table border="5" cellpadding="3" cellspacing="2">
<tr><td width="1822" align="center">

</td></tr>
  <tr>
    <td>
      <p align="center" >&nbsp;</p>   
      </td>
  </tr>
  <tr>
    <td><p class="style2" ><strong><em>Auto Board</em></strong></p>
      <table width="100%" bordercolor="#990033">
        <tr>
          <td width="23%" rowspan="6" class="Rightborder" >&nbsp;</td>
          <td width="61%" bordercolor="#B6DB90" bgcolor="#A0BFE2" class="Topborder"><p align="center"><span class="style2"><strong>INFORMATION</strong></span></p>
            <p><br>
          Date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -- 02/24/11          </p></td>
          <td width="16%" rowspan="6" class="Leftborder">&nbsp;</td>
        </tr>
        <tr>
          <td bgcolor="#A0BFE2"><p><br>

          <br>
</p></td>
        </tr>
        <tr>
          <td bgcolor="#A0BFE2"><div align="center" class="style4">  INFORMATION</div></td>
        </tr>
        <tr>
          <td bgcolor="#A0BFE2"><div align="center"><span class="style2"><br>
                <strong>DESCRIPTION</strong></span><br>
              <br><br><br>                  

            <div align="center"><strong>How many Layers (#)             </strong></div>

            <div  align="center">                   
                <input name="number" type="text"  size="10" maxlength="5" onchange="test(this.value)"  onfocusout="report(this.value)">
            </div>

              </td>
        </tr>
        <tr>
          <td bordercolor="1871D1" bgcolor="#A0BFE2" class="style2">

                ** ARTWORK/PCB #&nbsp;&nbsp; 05126 REV C  **
                </p>    
    <script>             
    function report(period)     
    {   
    if (period=="1") { i = 4;  do {+ i; i++;     e =  document.getElementById (i);  e.style.display = 'none'} while (i < 50)    }
    if (period=="2") { i = 5;  do {+ i; i++;     e =  document.getElementById (i);  e.style.display = 'none'} while (i < 50)    }}    

    function test(period)   
    {var i = period 
     var x=parseInt(i)+4;
     var y=parseInt(i)+5;
     var z=parseInt(i)+6;
     var zz=parseInt(i)+7;
     document.getElementById("block2").innerHTML = (x+")")
     document.getElementById("block4").innerHTML = (y+")")
     document.getElementById("block6").innerHTML = (z+")")
     document.getElementById("block8").innerHTML = (zz+")")
     }
    </script>

    <script>        
    function init() {
    document.getElementById('x').addEventListener('drop', onDrop, true)
}       
    </script>           
                <p id="1">&nbsp; 1)  Primary silkscreen layer <img src="../0_Images/blank.jpg" width="60" height="15">  File name: &nbsp;
                  <input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;"  size="60" />
                </p>
                <p id="2">&nbsp; 2)  Primary soldermask layer <img src="../0_Images/blank.jpg" width="52" height="15"> File name: &nbsp;
                  <input name="Primary Silkscreen122" type="text" size="60" style="border:3px solid #1871D1;" /></p>                
                <!--5-->
                <div >&nbsp; <div id="block2"></div>
                  &nbsp;Secondary side layer <img src="../0_Images/blank.jpg" width="80" height="15">  File name: &nbsp;
                  <input name="Primary Silkscreen1256" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
                <!--6-->
                <div >&nbsp; <div id="block4"></div>
                  &nbsp;Secondary soldermask layer <img src="../0_Images/blank.jpg" width="32" height="15">  File name: &nbsp;
                  <input name="Primary Silkscreen1257" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>
                <!--7-->  
                <div >&nbsp; <div id="block6"></div>
                  &nbsp;Secondary silkscreen layer1 <img src="../0_Images/blank.jpg" width="33" height="15">  File name: &nbsp;
                  <input name="Primary Silkscreen1258" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>                     
                <p>** FABRICATION DRAWINGS #&nbsp; 05126 REV C&nbsp;  **</p>
                <!--8-->
                <div >&nbsp; <div id="block8"></div>
                  &nbsp;Fabriction Drawing <img src="../0_Images/blank.jpg" width="95" height="14">  File name: &nbsp;
                  <input name="Primary Silkscreen12259" type="text" size="60" style="border:3px solid #1871D1;" /></div><br>    

***********************<br>
End of</td>
        </tr>
      </table>
      </td>
  </tr>
</table>

</body>
</html>

Is HTML4 part of the requirements? or it could be HTML 5 as well? — Linial, Oct 02 '14 at 13:45
Yes unfortunately. We only have IE 8 on our systems. I would like to update but it's not up to me. I have seen HTML 5 it is directly implemented. It would be so much easier then. — Jonathan Blaine, Oct 02 '14 at 13:48
I implemented the code using jsfiddle because putting it in my code to much going on. Guess what it works. [jsfiddle](http://jsfiddle.net/emqc821L/). It shouldn't be to hard to add it now. — Jonathan Blaine, Oct 02 '14 at 17:13

score 0 · Accepted Answer · answered Oct 02 '14 at 17:31

Okay. I found the solution why this was not working for me on my HTML page. I have to use jsfiddle in Chrome or it doesn't work. I then figured I would try my code in Chrome as well and walla, Success. Again here is what worked jsfiddle.

Solution:

<input name="Primary Silkscreen12" type="file" dropzone="copy file:image/png file:image/jpg file:image/jpeg" style="border:3px solid #1871D1;"  size="60" />

<script>
function init() {document.getElementById('x').addEventListener('drop', onDrop, true)}
</script>

HTML 4 Drag & Drop Picture to Textbox in IE - Result will be filename

1 Answers1