| |
|
|
| | Всем привет. Задача следующая: имеется форма ввода данных, одно из полей типа file, необходимо сделать так, чтобы после выбора пользователем какого-либо изображения рядом с полем file появлялась уменьшенная версия данного изображения.
Код, приведенный ниже, должен по указанному пути к файлу отобразить его в теге img, но он работает только на FireFox 3.5. Сделать так, чтобы он работал на IE8, Opera и Chrome не получается. Проблема в том, что после присвоения параметру src пути к изображению само изображение в браузере не появляется (вместо него появляется значок, символизирующий отсутствие файла по данному пути). Как правильно задать путь к изображению в указанных браузерах, кроме FireFox, я не знаю.
<html>
<head>
<script>
function test()
{
if(document.getElementById('oUploadPicture').value == '') return;
var oImg = document.getElementById('oBannerPreviewImg');
if(window.navigator.appName == 'Netscape')
{
oImg.src = document.getElementById('oUploadPicture').files[0].getAsDataURL();
}
if(window.navigator.appName == 'Opera')
{
var path = document.getElementById('oUploadPicture').value;
oImg.src = path = 'file://' + path;
//document.getElementById('lnk').innerHTML = path;
}
if(window.navigator.appName == 'Microsoft Internet Explorer')
{
var path = document.getElementById('oUploadPicture').value;
path = path.replace(/\\/g, '/');
path = 'file:///' + path;
//document.getElementById('lnk').innerHTML = path;
oImg.src = path;
}
}
</script>
</head>
<body>
<p id="lnk"></p>
<img id="oBannerPreviewImg" src="./def_src.gif" />
<br />
<input id="oUploadPicture" type="file" onmouseover="test()" onmouseout="test()" onmousemove="test()">
<!--<input id="photo" type="text" onclick="test()" />-->
</body>
</html>
|
Подскажите, в чем проблема? | |
| |
|
