показать загруженное изображение, прежде чем нажать на кнопку отправить

Question

показать загруженное изображение, прежде чем нажать на кнопку отправить

0

Я хочу показать загруженное изображение, прежде чем нажимать кнопку загрузки. Я пробовал, но не работал, пожалуйста, проверьте мой код ниже. когда я выбираю изображение для загрузки, тогда изображение не будет появляться и после этого с помощью firebug я обнаружил, что мой код создает странные URL-адреса. вы также можете проверить скрипку здесь: http://jsfiddle.net/XdXLJ/

скрипт

$(document).ready(function(e) {
    $('#upload').click(function(){
        $('input[type="file"]').show().focus().click().hide();
        $('input[type="file"]').change(function(){

            var val = $('this').val;
            $('.img').append('<img src="'+val+'" />')

            })
        })
})

HTML

<form id="form1" name="form1" method="post" action="">
<input name="" type="file" />
<div id="upload">Upload</div>
<div class="img"></div>
</form>

Стиль

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;}
input[type="file"]{display:none;}

Kamal 24 сен. 2013, в 13:02

Источник

Теги:

jquery

file-upload

2 ответа

Ещё вопросы

Muhammad Omar ElShourbagy · Answer 1 · 2014-01-29T12-25-00.000Z

в HTML:

<input type='file' onchange="readURL(this);" />

Javascript/JQuery через Type FileReader

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

где input является элементом <input type="file"> если вы используете AjaxToolKit AsyncFileUpload, вы можете получить вход, используя: fileUploadElement.get_inputFile()

Обратите внимание: как просмотреть изображение до и после загрузки?

Hussain Akhtar Wahid 'Ghouri' · Answer 2 · 2013-09-24T08-44-00.000Z

если ваше требование работать в браузерах, отличных от IE, то вы можете следовать этой ссылке, и у вас есть идеальный ответ для вас

но если ваше требование также включает IE, то вы делаете несколько шагов. Шаг 1: создайте другую форму, отличную от вашей основной формы, эта другая форма не может находиться внутри основной формы, поскольку форма внутри формы не может быть отправлена.

Шаг 2: внутри вашей новой формы

<input type="file" name="imageFileChooser"/>

Шаг 3: при событии изменения поля файла вызывается функция ajax

Шаг 4: эта функция ajax представляет вашу новую форму только с полем изображения и сохраняет изображение на стороне сервера

Шаг 5: когда вы хотите предоставить предварительный просмотр формы, вам необходимо вызвать временно сохраненное изображение с вашего сервера.

Шаг 6: после предварительного просмотра и отправки отправьте основную форму и возьмите изображение с временного местоположения сервера, или вы также можете сохранить скрытый файл iput tag с тем же файлом.