jQuery - 如何从输入文件 img 制作缩略图

jQuery - how to make a thumbnail from the input file img

本文关键字：img 略图 文件 输入 jQuery      更新时间：2023-09-26

我想用html制作一个花哨的图像上传系统。当用户将图像选择到输入文件中时，将显示图像的缩略图。正如我所读到的，由于安全问题，无法从输入文件中获取图像的路径。有人可以告诉我如何使用javascript（使用jQuery）做到这一点吗？谢谢！

我可能有一个技巧：

尝试：

    <!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>

在文件上传到服务器之前，您无法访问文件内容，除非您使用的是在这方面具有一些花哨功能的 Chrome。

您可以做的是上传文件，然后使用 PHP 获取作为缩略图生成的文件，我认为这不是您正在寻找的答案。所以相反，给你一个公平的答案：不，你不能这样做。

我建议使用 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>
相关文章：