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

发布于 2024-11-08 11:03:08 字数 135 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪 2024-11-15 11:03:08

我可能有一个技巧：

尝试：

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

I might have a trick for this:

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>

回复收藏 0 原文

小清晰的声音 2024-11-15 11:03:08

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

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

回复收藏 0 原文

雪化雨蝶 2024-11-15 11:03:08

我建议使用 jQuery FileFive 插件：
https://github.com/JDBurnZ/jquery-file Five

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>

I'd recommend using the jQuery FileFive plug-in:
https://github.com/JDBurnZ/jquery-filefive

Internet Explorer 10, Firefox and Chrome all support HTML5 File Objects, which allows you to read the file's size, filename and mime type, as well the actual contents of the file; the later of which is useful if you want to display thumbnails of selected images without ever uploading them.

Working jsFiddle Example: http://jsfiddle.net/URqBk/

Example Code:

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

回复收藏 0 原文

~没有更多了~