如何使用Javascript / HTML进行简单的图片上传 [英] How to make a simple image upload using Javascript/HTML

问题描述

这是我正在寻找的。

• 用户（我）会选择一张图片


• 页面将显示图片而不刷新页面或转到另一页文件。


• 多个< img src> 会这样做，因为我需要显示不同的图片大小。 b

这是我的代码。 （其中一些是编辑我从在这里）

 <风格> 
 / *图像设计属性* / 
 .thumb {
 height：75px; 
 border：1px solid＃000; 
 margin：10px 5px 0 0; 
} 
< / style> 
 
< script type =text / javascript> 
 / *上传表单* / 
 $（function（）{
 $（：file）。change（function（）{
 if（this.files& & this.files [0]）{
 var reader = new FileReader（）; 
 
 reader.onload = imageIsLoaded; 
 reader.readAsDataURL（this.files [0] ）; 
} 
}）; 
}）; 
 
函数imageIsLoaded（e）{
 $（'＃myImg'）。attr（'src'，e.target.result）; 
 $（'＃yourImage'）。attr（'src'，e.target.result）; 
}; 
 
< / script> 
 
 
< input type ='file'/> 
< / br>< img id =myImgsrc =＃alt =您的图片height = 200 width = 100> 
  

解决方案

这里是我的完整代码：

HTML：

 < input type =fileonchange =previewFile（） ><峰; br> 
< img src =height =200alt =图片预览...> 
  

Javascript：

 <脚本> 
函数previewFile（）{
 var preview = document.querySelector（'img'）; //选择名为img 
的查询var file = document.querySelector（'input [type = file]'）。files [0]; //和这里一样
 var reader = new FileReader（）; 
 
 reader.onloadend = function（）{
 preview.src = reader.result; 
} 
 
 if（file）{
 reader.readAsDataURL（file）; //将数据读取为URL 
} else {
 preview.src =; 
} 
} 
 
 previewFile（）; //调用名为previewFile（）的函数
< / script> 
  

Does any one know how to do a simple image upload and display it on the page.

This is what I'm looking for.

• User(me) will choose a image
• The page will display the image without refreshing the page or going to another file.
• multiple <img src> will do because I need to display different image size.

This was my code. (Some of it are edited I got it from here )

<style>
    /* Image Designing Propoerties */
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<script type="text/javascript">
    /* The uploader form */
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#yourImage').attr('src', e.target.result);
    };

</script>


<input type='file' />
</br><img id="myImg" src="#" alt="your image" height=200 width=100>

解决方案

So here's my complete code:

HTML:

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript:

<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }

  previewFile();  //calls the function named previewFile()
  </script>

这篇关于如何使用Javascript / HTML进行简单的图片上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！