实现图片上传预览，火狐,谷歌，360亲测可行

来源：互联网发布：印度教知乎编辑：程序博客网时间：2024/06/13 20:19

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>图片上传前的预览</title><style type="text/css">#preview, .img, img {    width: 300px;    height: 300px;}#preview {    border: 1px solid #000;}</style></head><body><div id="preview"></div><input type="file" onchange="preview(this)" /><script type="text/javascript">  function preview(file){    var prevDiv = document.getElementById('preview');    if (file.files && file.files[0])    {        var reader = new FileReader();        reader.onload = function(evt){            prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';        }          reader.readAsDataURL(file.files[0]);    }else      {        prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';    }}</script></body></html>

0 0