Javascript jQuery-如何从输入文件img生成缩略图_Javascript_Jquery_File_Types_Upload

Javascript jQuery-如何从输入文件img生成缩略图

javascript jquery file types

Javascript jQuery-如何从输入文件img生成缩略图,javascript,jquery,file,types,upload,Javascript,Jquery,File,Types,Upload,我想用html制作一个精美的图像上传系统。当用户在输入文件中选择图像时，将显示图像的缩略图。正如我所读到的，由于安全问题，无法从输入文件中获取图像的路径。有人能告诉我如何使用javascript（使用jQuery）实现这一点吗？谢谢大家! 在文件上传到服务器之前，您无法访问文件内容，除非您使用的是Chrome浏览器，它在这方面有一些奇特的功能你所能做的就是上传文件，然后用PHP获取生成为缩略图的文件，我认为这不是你想要的答案。所以，给你一个公平的答案：不，你不能这么做。我可能有个窍门：

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

谢谢大家!

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

你所能做的就是上传文件，然后用PHP获取生成为缩略图的文件，我认为这不是你想要的答案。所以，给你一个公平的答案：不，你不能这么做。

我可能有个窍门：

尝试：


函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（#废话）
.attr（'src'，e.target.result）
.宽度（100）
.身高（100）；
};
reader.readAsDataURL（input.files[0]）；
}
}
JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}

我建议使用jQuery

FileFive

插件：

Internet Explorer 10、Firefox和Chrome都支持HTML5文件对象，允许您读取文件大小、文件名和mime类型以及文件的实际内容；如果你想在不上传它们的情况下使用它们，后面的选项很有用

工作JSFIDLE示例：

示例代码：

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


$（函数（）{
$（document.body）.on（'change'，'input[type=“file”]”，函数（事件）{
var$=$.filefive（此）；
$.each（$filefive.files（），函数（偏移量，文件）{
var$img=file.image（）；
$（'body'）。追加（$img）；
}
});
});

正如Karl在下面所说的，这需要服务器端的参与。这对于支持它的浏览器是很好的，比如FireFox（3.6+）和Chrome（7+），IE还没有，即使是在版本9中，Opera也没有。因此还不能普遍使用，这是大多数HTML5的情况。@Orbling：很好地指出。为了实现完全的跨浏览器兼容性，请考虑使用Flash、Silverlight或Google Gears复制它etc@XGreen：我发现大多数web开发专业人员仍然完全避免使用HTML5，覆盖率还不够。我相信，运行IE或FF作为主要浏览器的机器数量仍比v3.6低一半以上。@Orbling：不幸的是，你是对的。但雇主也不希望他们的员工在一些不会马上受益的事情上付出努力。我真的很期待展望html5实践变得越来越广泛。我通常建议采用html5实践，并为旧浏览器实施备选回退。这使熟悉html5的人能够更快、更容易地过渡。@XGreen:这方面的问题是不必要的成本。回退在一般情况下有效如果是这样的话，为什么首先要生产新的变体？考虑到新变体的主要目的是要废除旧的、更痛苦的方法。从财政和时间预算来看，在大多数公司很难证明这一点。谢谢大家的回答，好吧，现在我明白了事情是如何运作的……那么如果我不得不上传的话在服务器上添加文件如何在不刷新页面的情况下提交表单？是否存在使用ajax的问题？请看一看：您可以使用

onSuccess

事件获取图像，最好将图像链接作为后端的响应。

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