select image on drive with javascript
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.
<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> </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
加载中,请稍侯......
精彩评论