select image on drive with javascript_问答_开发者

开发者 https://www.devze.com 2023-02-19 21:06 出处：网络

I have created a website, when the admin dblclick on the image then he can choose for a new one. That I will accomplish with javascript. But, I don\'t have any idea to do that, the following code is t

I have created a website, when the admin dblclick on the image then he can choose for a new one. That I will accomplish with javascript. But, I don't have any idea to do that, the following code is the html.

select image on drive with javascript

<form action="controller.php" method="post" class="popupform" id="form_changeillustration" enctype="multipart/form-data">
<dl>
  <dt><label for="newillustra开发者_开发知识库tion">choose a new photo: </label></dt>
  <dd><input type="file" name="newillustration" id="newillustration" /></dd>
  <dt>&nbsp;</dt>
  <dd class="buttonrow">
    <input type="hidden" name="page" value="{$PAGE}" />
    <input type="hidden" name="module" value="newillustration" />
    <input type="submit" class="btnOk" value="edit" />
    <input type="button" class="btnCancel" value="cancel" />
  </dd>
</dl>
</form>

Here is an example of what you can do :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body>
        <p><img src="images/moi.jpg" alt="" id="image" /></p>

        <p style="display: none;"><input type="file" name="file" id="file" /></p>

        <script type="text/javascript">
            window.addEventListener('load', function() {
                var image = document.getElementById('image');
                var file = document.getElementById('file');

                image.addEventListener('dblclick', function() {
                    file.click();
                }, false);

                file.addEventListener('change', function() {
                    var fileToUpload = this.files[0];

                    console.log(fileToUpload);
                }, false);
            }, false);
        </script>
    </body>
</html>

It will only work in Firefox (the .click() method works in FF and IE, but the File object is not implemented in IE), so if your admin's browser is FF you can use this trick and then follow this doc to upload your file : https://developer.mozilla.org/en/using_files_from_web_applications