如何在通过 JavaScript 上传之前上传预览图像

IT技术 javascript
2021-01-22 08:50:38

我想在将图像上传到服务器之前预览图像。我已经为它编写了一些代码，但由于某种类型的安全原因，它只能在 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>
6个回答

对于火狐。为了安全起见，它有一条截断的路径。但是，他们提供了其他方法来做到这一点：

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;" />

MDC 上文件列表对象的文档

真的很感谢 Ramiz .. :)
2021-03-24 08:50:38
@Zain 您拥有哪个版本的 Chrome。
2021-04-01 08:50:38
我没有在 Chrome 中检查它。将在几分钟内回复您。
2021-04-03 08:50:38
@Zain chrome 似乎比 FF 更安全 :) Chrome 支持“文件”具有大小、文件名、名称等属性，但没有“getAsDataURL()”。我研究了其他选项，但似乎 Chrome 没有这么好的选项。我会在 chrome dev group 上发布这个，看看他们得到了什么。
2021-04-06 08:50:38
@ user648372 我已经更新了我的帖子。检查 <prev> 标签。您必须更改一些安全设置才能使其适合您。
2021-04-08 08:50:38 

uploadFile(event: any) {
    const image: any = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
}
<div>
    <img id="output" width="200" />
</div>
<div class="form-group">
    <label for="exampleFormControlFile1">File Input</label>
    <input type="file" (change)="uploadFile($event)" class="form-control-file" />
</div>

我已将此应用到我的 angular 9 项目中，并且效果很好。
2021-03-29 08:50:38

这在 FF 3.6、IE 8、Safari 4.0 和 Chrome 3.195 中对我来说很好用。

一些样式指针虽然：

  • 不要使用固定宽度的预览区域，您的图片会扭曲以适应该区域

  • 而不是document.getElementById()使用这个：

    function $(id) { return document.getElementById(id); }

  • 例子： $('send')

史蒂夫..请你给我解释一下 (function $(id) { return document.getElementById(id); }) ..一点点..Shall非常感谢
2021-04-08 08:50:38
使用 '$' 会导致与广泛使用的库 jquery 混淆。
2021-04-08 08:50:38
@Zain 他提供了一种使用document.getElementById(). 它很冗长，因此$()快捷方式很有帮助。
2021-04-10 08:50:38

除了使用新的文件 API 外，在上传之前无法获取用户文件：

示例：显示用户选择图像的缩略图

当然，这不会是跨浏览器的。可能还有一种方法可以通过 Flash 和数据 URL（或仅在 Flash 中预览）来实现，但我更愿意避免 JavaScript <-> Flash 集成。

就像我说的，你可以用 html5 来做。Mugtug 就是这样做的：Mugtug Darkroom 是一个基于浏览器的照片编辑器，完全由 HTML5 提供支持
2021-04-10 08:50:38
谢谢 Pradeep 和 theazureshadow，但是，我很难相信我们无法在浏览器（FF，基于 Webkit）中打开图像。请查看来自“Mugtug”的名为 Darkroom 的 Web 应用程序 ( mugtug.com/darkroom )。这个网络应用程序允许用户加载图像以进行进一步操作（网络应用程序左上角的打开图标），我想实现点击时弹出对话框的相同功能，以便用户可以选择要显示的图像. 有什么想法吗？
2021-04-13 08:50:38

只需查看与文件 API 相关的以下链接，它适用于 IE9+ 我检查它不适用于 IE8 它显示了如何预览图像和文本文件 http://www.xul.fr/en/html5/filereader.php FileReader，在网页中加载图像

FileReader 允许访问本地文件系统并仅使用 JavaScript 代码加载文档。

这样就完成了选择本地文件，因为这个标签只能将这个文件的内容和表单数据一起提供给服务器上的脚本。

兼容性测试

当前浏览器识别它的 File API，其中包括 FileReader 对象？

支持结果文件 API。测试源代码：

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) 
  document.write("<b>File API supported.</b>");
else
  document.write('<i>File API not supported by this browser.</i>');
</script>

HTML代码：

<input type="file" id="getimage">

<fieldset><legend>Your image here</legend>
    <div  id="imgstore"></div>
</fieldset>

JavaScript 代码：

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>
其它你可能感兴趣的问题
上一篇文本区字符限制 下一篇Javascript/jQuery：在多选中设置值（选择）