Fatal编程技术网
  • javascript/
  • 如何在通过JavaScript上传之前上传预览图像

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

javascript

如何在通过JavaScript上传之前上传预览图像,javascript,Javascript,我想先预览图像，然后再将其上载到服务器。我已经为它写了一点代码，但由于某种安全原因，它只在InternetExplorer中预览，而没有在Safari、Chrome、Firefox等其他浏览器中预览。在这些浏览器中是否有预览图像的解决方案 <body> <form name="Upload" enctype="multipart/form-data" method="post"> Filename: <INPUT type

我想先预览图像，然后再将其上载到服务器。我已经为它写了一点代码，但由于某种安全原因，它只在InternetExplorer中预览，而没有在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>


文件名：
var img_id=0
var image=新数组（）
document.getElementById（'send'）。onclick=function（）
{
img_id++
var id=“imgid”+img\u id
image=document.getElementById（'submit'）.value；
document.getElementById（'div'）。innerHTML=“”
}
在FF3.6、IE 8、Safari 4.0和Chrome 3.195中，这对我来说效果很好

<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>
不过有几个风格指针：

  • 不要使用固定宽度的预览区域，您的图片将被扭曲以适合该区域
  • 使用以下命令代替
    document.getElementById（）
    ：

    function$（id）{returndocument.getElementById（id）；}

  • 示例：
    $（'send'）

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

当然，这不会是跨浏览器的。也许还有一种方法可以通过Flash和数据URL（或者只是在Flash中预览）实现，但我更喜欢避免JavaScript Flash集成。

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


#前图像{
边框：8px实心#ccc；
宽度：300px；
高度：200px；
}
函数setImage（文件）{
如果（全部文件）
document.getElementById（'prevImage'）.src=file.value；
其他的
document.getElementById（'prevImage'）.src=file.files.item（0.getAsDataURL（）；
if（document.getElementById（'prevImage'）.src.length>0）
document.getElementById（'prevImage'）.style.display='block'；
}
IE8需要更改安全设置：internet设置、安全性、自定义级别：
[]将文件上载到服务器时包括本地目录路径
（）禁用
（o） 使能

这在FF 3.6、IE 9、Safari 4.0和Chrome 3.195中运行良好

<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>
只要看一下下面关于文件API的链接，它适用于IE9+我检查过它不适用于IE8 它显示了如何预览图像和文本文件 FileReader，在网页中加载图像

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

这就完成了选择本地文件的步骤，因为此标记只能将此文件的内容与表单数据一起提供给服务器上的脚本

相容性试验

当前浏览器是否识别出包含FileReader对象的文件API

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

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

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


if（window.File&&window.FileReader&&window.FileList&&window.Blob）
document.write（“支持文件API”）；
其他的
document.write（'此浏览器不支持文件API'）；
HTML代码：

<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代码：

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>


函数imageHandler（e2）
{ 
var store=document.getElementById（'imgstore'）；
store.innerHTML=''；
}
函数加载映像（e1）
{
var filename=e1.target.files[0]；
var fr=new FileReader（）；
fr.onload=imageHandler；
fr.readAsDataURL（文件名）；
}
window.onload=function（）
{
var x=document.getElementById（“文件浏览”）；
x、 addEventListener（'change'，readfile，false）；
var y=document.getElementById（“getimage”）；
y、 addEventListener（'change'，loadimage，false）；
}
如果输入类型为文件，那么使用htmlfilereader函数可以看到html页面的预览吗？使用accept type=“text/html”

我得到了文件的描述和大小


功能手柄文件选择（evt）{
var files=evt.target.files；//文件列表对象
//文件是文件对象的文件列表。请列出一些属性。
var输出=[]；
for（var i=0，f；f=files[i]；i++）{
output.push（“
  • ”，escape（f.name），“（”，f.type | | |“n/a”，“）-”，
f、 大小，'字节，上次修改：'，
f、 lastModifiedDate？f.lastModifiedDate.toLocaleDateString（）：“不适用”，
“
    • ”）；
}
document.getElementById（'list'）.innerHTML='
      '+output.join（''）+'
    '；
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；
    上述问题与脱机本地存储的html页面有关。我们可以使用live url查看live页面的预览-

    <div>
<form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <br>
        <img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />
    </form>
<div>

    
#框架{
宽度：800px；
高度：520px；
边界：无；
-moz变换：比例（0.2）；
-moz变换原点：0；
-o变换：标度（0.2）；
-o变换原点：0；
-webkit变换：比例（0.2）；
-webkit转换原点：0；
}

    使用这个很简单
    
在HTML文件中使用
    

    <script>

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
</script>

    

    

    

    
在java脚本文件中，只需编写以下内容
    

    
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（“#imgInp”）.change（函数（）{
readURL（this）；
});

    

    上传文件（事件：任意）{
const image:any=document.getElementById（'output'）；
image.src=URL.createObjectURL（event.target.files[0]）；
}
    

    
文件输入

    Steve..你能给我解释一下吗

    <script>

 function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
</script>