通过JavaScript上传之前如何上传预览图像
我想先预览图像，然后再将其上传到服务器。我已经为其编写了一些代码，但是由于某种安全原因，它只能在Internet
Explorer中预览，而不能在其他浏览器（如Safari，Chrome，Firefox）中预览。有什么解决方案可以在这些浏览器中预览图像吗？
<body>
<form name="Upload" enctype="multipart/form-data" method="post">
Filename: <INPUT type="file" id="submit">
<INPUT type="button" id="send" value="Upload">
</form>
<div
id="div"
align="center"
style="height: 200px;width: 500px;border-style: ridge;border-color: red">
</div>
</body>
<script type="text/javascript">
var img_id=0
var image = new Array()
document.getElementById('send').onclick=function()
{
img_id++
var id="imgid"+img_id
image = document.getElementById('submit').value;
document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
}
</script>
</html>
问题答案：
对于Firefox。由于安全原因，它的路径被截断了。但是，他们提供了其他方法：
var img = document.createElement("IMG");
if(document.all)
img.src = document.getElementById('submit').value;
else
// Your solution for Firefox.
img.src = document.getElementById('submit').files.item(0).getAsDataURL();
document.getElementById('div').appendChild(img);
以下内容适用于Internet Explorer 7和Firefox 3。
<style type="text/css">
#prevImage {
border: 8px solid #ccc;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
function setImage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display = 'block';
}
</script>
<pre>
IE8 needs a security settings change: internet settings, security, custom level :
[] Include local directory path when uploading files to a server
( ) Disable
(o) Enable
</pre>
<form>
<input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />
-
问题内容： 我要预览表单中的图像或照片，但是它不起作用，并且HTML代码如下所示： 并在下面合并了JS代码/脚本： 我的表单上有两个主要问题： 1.为什么图像或图片的预览不起作用？ 2.当单击保存按钮时，如何从表单粘贴照片，它将链接到我创建的另一个PHP或PHP页面？ 问题答案： 试试这个：（用于预览） 在这里工作演示>
-
问题内容： 嗨，我想知道在使用angularjs上传图像之前是否可以预览图像？我正在使用这个图书馆。https://github.com/danialfarid/angular- file-upload 谢谢。这是我的代码： template.html controller.js 问题答案： OdeToCode为这个东西发布了很棒的服务。因此，通过此简单的指令，您可以轻松预览甚至查看进度栏： 它适
-
问题内容： 在我的HTML表单中，我输入了类型为file的文件，例如： 然后，通过单击该输入按钮来选择多个文件。现在，我想在提交表单之前显示所选图像的预览。如何在HTML 5中做到这一点？ 问题答案： HTML5带有FileAPI规范，它使您可以创建应用程序，使用户可以在本地与文件交互；这意味着您可以加载文件并在浏览器中呈现它们，而无需实际上传文件。FileAPI的一部分是FileReader接口
-
问题内容： 我希望能够在上传文件之前预览文件（图像）。预览操作应在浏览器中全部执行，而无需使用Ajax上载图像。 我怎样才能做到这一点？ 问题答案： 请看下面的示例代码：
-
本文向大家介绍Javascript图片上传前的本地预览实例，包括了Javascript图片上传前的本地预览实例的使用技巧和注意事项，需要的朋友参考一下 图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来实现图片上传预览功能，下面来看一个例子。 原理: 分为两步：当上传图片的input被触发并选择本地图片之后获取要上
-
本文向大家介绍javascript图片预览和上传（兼容IE），包括了javascript图片预览和上传（兼容IE）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js图片预览和上传的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。