zoukankan      html  css  js  c++  java
  • js图片预览(一张图片预览)

    核心思想:无论是一张图片上传还是多图上传,首先我们都需要先获得图片对象.

    栗子:

     <inuput type="file" id="myfile" onchange=" ">

     var myfiles = document.getElementById("myfile");

    接着我们使用URL.createObjectURL()方法获取选中的文件,语法:URL.createObjectURL(object.options);

    即: var url = URL.createObjectURL(myfiles.files[0]);在我们获取文件的URL.createObjectURL(myfiles.files[0])之后,将他赋值给url。

    接着我们定义存放预览图片的img,<img id="myimg" >  这里我们暂时不添加src属性,如果添加,在没有上传之前就会显示一个找不到图片的样式。

    然后我们将url赋值给定义的img标签的src属性

    即:document.getElementById("myimg").src=url;

    到这里一张图片上传就完成了。我们接下来上源码:

    html部分:

    <input type="file" id="myfile" onchange="mypit()">
    <img id="myimg">
     

    js部分:

    function mypit() {
    var myfiles = document.getElementById("myfile"); //获取点击按钮的对象
    var url = '';
    url = window.URL.createObjectURL(myfiles.files[0]); //获取forms中的文件,并赋值给url,每次调用URL.crreateObjectURl方法时,都会创建一个对象。
    document.getElementById("myimg").src = url; //获取img标签对象的src,并将url赋值给img标签的src属性,这是完成打印的一步。
    }
  • 相关阅读:
    java内存区域模型
    Java类加载器(双亲委派模型)(综述)
    2.无重复字符的最长子串
    浅谈Java中的对象和引用
    OSI七层协议大白话解读
    MPLS
    计算机网络为什么要分为五层结构?其依据是什么?
    前端技巧小结
    移动端尺寸新写法-rem
    编写高质量代码:Web前端开发修炼之道(四)
  • 原文地址:https://www.cnblogs.com/ZM-ONE/p/8301628.html
Copyright © 2011-2022 走看看