为什么我无法将图片drag-drop到浏览器指定的位置

以下是我的代码。
1是可以拖放图片的的，2是不能拖放的。两者的差别只是因为多套了一个addInputElement(),就导致不能运行。请大神们帮忙看看~~1.<html lang="en" style="width: 100%; height: 100%"> 
    <head> 
        <meta charset="utf-8" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> 
        <style type="text/css"> 
        </style> 
    </head>     <body class="center" style="width: 100%; height: 100%">  
        <h1>Create movie record</h1>
        <form action='$phpself' method="post">
            <fieldset>    
                <legend>Supplementary data</legend>
                <button type="button" onclick="addInputElement()">Add data</button><br>
                <table border="3" id ="myTable">
                    <tr>
                        <td>Picture</td>
                        <td>Comment</td>
                    </tr>
                </table>
            </fieldset>
        </form>        <script type="text/javascript">
                        table = document.getElementById('myTable');
                        row = table.insertRow(1);
                        cell1 = row.insertCell(0);
                        cell1picture = document.createElement('img');
                        cell1picture.setAttribute('id', 'imgBG');
                        cell1picture.setAttribute('src', 'BG.jpg');
                        cell1.appendChild(cell1picture);
                                       var dropbox = document.getElementById('imgBG');
// Setup drag and drop handlers. 
                    dropbox.addEventListener('dragenter', stopDefault, false);
                    dropbox.addEventListener('dragover', stopDefault, false);
                    dropbox.addEventListener('dragleave', stopDefault, false);
                    dropbox.addEventListener('drop', onDrop, false);                    alert("111");
                    function stopDefault(e)
                    {
                        e.stopPropagation();
                        e.preventDefault();
                    }
                    function onDrop(e)
                    {
                        e.stopPropagation();
                        e.preventDefault();
                        var readFileSize = 0;
                        var files = e.dataTransfer.files;
                        file = files[0];
                        readFileSize += file.fileSize;
                        // Only process image files. 
                        var imageType = /image.*/;                        if (!file.type.match(imageType))
                        {
                            return;
                        }
                        var reader = new FileReader();
                        reader.onerror = function(e)
                        {
                            alert('Error code: ' + e.target.error);
                        };
                        // Create a closure to capture the file information. 
                        reader.onload = (function(aFile)
                        {
                            return function(evt)
                            {
                                dropbox.src = evt.target.result;
                            }
                        })(file);                        // Read in the image file as a data url. 
                        reader.readAsDataURL(file);                    }
        </script> 
    </body> 
</html>
2.<html lang="en" style="width: 100%; height: 100%"> 
    <head> 
        <meta charset="utf-8" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> 
        <style type="text/css"> 
        </style> 
    </head>     <body class="center" style="width: 100%; height: 100%">  
        <h1>Create movie record</h1>
        <form action='$phpself' method="post">
            <fieldset>    
                <legend>Supplementary data</legend>
                <button type="button" onclick="addInputElement()">Add data</button><br>
                <table border="3" id ="myTable">
                    <tr>
                        <td>Picture</td>
                        <td>Comment</td>
                    </tr>
                </table>
            </fieldset>
        </form>        <script type="text/javascript">
                    function addInputElement() {
                        table = document.getElementById('myTable');
                        row = table.insertRow(1);
                        cell1 = row.insertCell(0);
                        cell1picture = document.createElement('img');
                        cell1picture.setAttribute('id', 'imgBG');
                        cell1picture.setAttribute('src', 'BG.jpg');
                        cell1.appendChild(cell1picture);
                    }                    var dropbox = document.getElementById('imgBG');
// Setup drag and drop handlers. 
                    dropbox.addEventListener('dragenter', stopDefault, false);
                    dropbox.addEventListener('dragover', stopDefault, false);
                    dropbox.addEventListener('dragleave', stopDefault, false);
                    dropbox.addEventListener('drop', onDrop, false);                    alert("111");
                    function stopDefault(e)
                    {
                        e.stopPropagation();
                        e.preventDefault();
                    }
                    function onDrop(e)
                    {
                        e.stopPropagation();
                        e.preventDefault();
                        var readFileSize = 0;
                        var files = e.dataTransfer.files;
                        file = files[0];
                        readFileSize += file.fileSize;
                        // Only process image files. 
                        var imageType = /image.*/;                        if (!file.type.match(imageType))
                        {
                            return;
                        }
                        var reader = new FileReader();
                        reader.onerror = function(e)
                        {
                            alert('Error code: ' + e.target.error);
                        };
                        // Create a closure to capture the file information. 
                        reader.onload = (function(aFile)
                        {
                            return function(evt)
                            {
                                dropbox.src = evt.target.result;
                            }
                        })(file);                        // Read in the image file as a data url. 
                        reader.readAsDataURL(file);                    }
        </script> 
    </body> 
</html>
javascripthtml5

解决方案 »

  1.   

     function addInputElement() {
                            table = document.getElementById('myTable');
                            row = table.insertRow(1);
                            cell1 = row.insertCell(0);
                            cell1picture = document.createElement('img');
                            cell1picture.setAttribute('id', 'imgBG');
                            cell1picture.setAttribute('src', 'BG.jpg');
                            cell1.appendChild(cell1picture);
                        }                    var dropbox = document.getElementById('imgBG');
    // Setup drag and drop handlers. 
                        dropbox.addEventListener('dragenter', stopDefault, false);
                        dropbox.addEventListener('dragover', stopDefault, false);
                        dropbox.addEventListener('dragleave', stopDefault, false);
                        dropbox.addEventListener('drop', onDrop, false);
    运行的时候，id为imgBG的图片还没有创建出来，所以你得到的是一个空对象，调用后面那些方法就会出错。