我想用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>