是否可以在通过表单上传之前预览本地图像？
[英]is it possible to preview local images before uploading them via a form?
问题描述
更具体地说，我想使用带有一个或多个用于图像的文件输入字段的表单。 当这些字段发生更改时，我想在将数据发送到服务器之前显示相关图像的预览。
我尝试了许多 javascript 方法，但总是遇到安全错误。 我不介意使用 java 或 flash，只要对于那些没有它们的用户来说，解决方案会优雅地降级。 （他们不会得到预览，也不会得到烦人的“安装这个东西”。）
有没有人以一种简单、可重用的方式做到这一点？
PS 我知道有一个沙箱，但沙箱是否必须在一个黑暗的、上锁的房间里，所有的窗户都被涂黑了？
6 个解决方案
解决方案1
31 2011-10-03 16:17:46
不需要花哨的东西。 您所需要的只是createObjectURL函数，它创建一个可以用作图像src的 URL，并且可以直接来自本地文件。
假设您使用文件输入元素 ( <input type="file" /> ) 从用户的计算机中选择了几张图像。 以下是为其创建图像文件预览的方法：
function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
function revokeObjectURL(url) {
return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}
function myUploadOnChangeFunction() {
if(this.files.length) {
for(var i in this.files) {
var src = createObjectURL(this.files[i]);
var image = new Image();
image.src = src;
// Do whatever you want with your image, it's just like any other image
// but it displays directly from the user machine, not the server!
}
}
}
解决方案2
1 2009-05-28 18:43:40
第一步是找出图像路径。 JavaScript 可以查询文件名/路径的上传控件，但是（出于安全原因）各种浏览器向 JS 引擎显示的内容与向用户显示的内容不同 - 它们倾向于保持文件名完整，因此您至少可以验证它的扩展名，但你可能会得到c:\\fake_path\\或一些类似的混淆的东西c:\\fake_path\\到文件名。 在各种浏览器上尝试此操作将使您了解返回为真实路径的内容，以及伪造的内容以及位置。
第二步是显示图像。 如果您知道本地图像的路径，则可以通过带有file://源 URL 的img标签显示本地图像，如果用户的浏览器允许file://方案。 （默认情况下，Firefox 不会。）因此，如果您能让用户告诉您图像的完整路径是什么，您至少可以尝试加载它。
解决方案3
0 2015-02-16 09:27:27
您可以尝试这种方法，尽管它似乎不适用于 IE。
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
编码简单快速。
我把代码放在这里以防万一源死了：
脚本：
<!-- Assume jQuery is loaded -->
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
在 HTML 中：
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
解决方案4
0 2009-05-28 17:39:33
这是一个用于上传图像和预览它 的 jQuery + PHP 脚本。
解决方案5
0 2009-05-28 18:33:46
出于安全目的，JavaScript 无法访问本地文件系统。
解决方案6
0 2009-05-28 18:47:50
我只见过这样做的 Java 小程序，例如 Facebook 上的图像上传小程序。 Java 方法的缺点是在运行之前会提示用户信任小程序，这是一种烦恼，但这允许小程序向文件浏览器显示图像预览或做更有趣的事情，例如允许用户上传整个目录。
使用JavaScript在Microsoft Edge中无法上传之前预览图像
[英]Preview images before uploading using JavaScript not working in Microsoft Edge
在使用jquery和ajax上传图像之前，先显示多个图像
[英]Getting multiple images to display before uploading them using jquery and ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.