jQuery - как сделать миниатюру из входного файла img - PullRequest
Новая
       0

jQuery - как сделать миниатюру из входного файла img

4 голосов
/ 19 мая 2011

Я хочу создать красивую систему загрузки изображений в формате html.Когда пользователь выбирает изображение во входном файле, появляется миниатюра изображения.Как я прочитал, нет способа получить путь к изображению из входного файла из-за проблем безопасности.Может кто-нибудь сказать мне, как я могу сделать это с помощью javascript (используя jQuery)?Спасибо!

Ответы [ 3 ]

7 голосов
/ 19 мая 2011

У меня может быть трюк для этого:

try: 

    <!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                        .attr('src', e.target.result)
                        .width(100)
                        .height(100);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>
2 голосов
/ 18 сентября 2013

Я бы рекомендовал использовать плагин jQuery FileFive: https://github.com/JDBurnZ/jquery-filefive

Internet Explorer 10, Firefox и Chrome поддерживают файловые объекты HTML5, что позволяет считывать размер файла, имя файла и тип mime, а также фактическое содержимое файла; последний из них полезен, если вы хотите отображать эскизы выбранных изображений , даже не загружая их.

Рабочий jsFiddle Пример: http://jsfiddle.net/URqBk/

Пример кода: 

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.github.com/JDBurnZ/jquery-filefive/master/jquery.filefive-0.1.0-rc1.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(document.body).on('change', 'input[type="file"]', function(event) {
                    var $ = $.filefive(this);
                    $.each($filefive.files(), function(offset, file) {
                        var $img = file.image();
                        $('body').append($img);
                    }
                });
            });
        </script>
    </head>
    <body>
        <form>
            <input type="file" name="myfile" />
        </form>
    </body>
</html>
2 голосов
/ 19 мая 2011

Вы не можете получить доступ к содержимому файла до того, как файл будет загружен на ваш сервер, если вы не используете Chrome, у которого есть некоторые необычные функции в этой области.затем извлеките файл, сгенерированный как миниатюру, с помощью PHP, я не думаю, что это тот ответ, который вы искали.Так что вместо этого, чтобы дать вам справедливый ответ: нет, вы не можете сделать это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...