input file选择图片后 预览

时间:2022-11-19 23:25:08

简单的jQuery实现input file选择图片后,可以预览图片的效果

简单的HTML代码:

<div>
<img src="" class="img">
</div> <input type="file" class="imgInput">

  注:img就是用来显示预览图片的

然后就是jQuery代码,很简单

$(".imgInput").change(function(){
$(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});

  然后就实现了选择图片后可以预览图片的效果了

其中需要注意的是使用的是DOM元素,jQuery元素和DOM元素之间的转换

input file选择图片后 预览的更多相关文章

  1. type&equals;&quot&semi;file&quot&semi; 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  2. Input File选择图片后,未保存预览

    今天实现上传图片到服务器 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" cl ...

  3. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  4. html选择图片后预览,保存并上传

    html代码:------------------添加-------------------------- accept="image/gif,image/jpeg,image/jpg,im ...

  5. 巧用weui&period;gallery&lpar;&rpar;,点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  6. android系统webview使用input实现选择文件并预览

    一般系统的实现方式: 代码实现 <!doctype html> <html> <head> <meta charset="utf-8"&g ...

  7. 在Vue项目中 选择图片并预览

    最近开始使用vue做项目 在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览 花了点时间解决,因此分享一下预览功能的解决方案 页面: <div class="sele ...

  8. input type&equals;file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  9. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

随机推荐

  1. poj1852 Ants ——想法题、水题

    求最短时间和最长时间. 当两个蚂蚁相遇的时候,可以看做两个蚂蚁穿过,对结果没有影响.O(N)的复杂度 c++版: #include <cstdio> #define min(a, b) ( ...

  2. 平衡二叉树(AVL)c语言实现

    参考: 二叉平衡树的插入和删除操作 平衡二叉树,AVL树之图解篇 [查找结构3]平衡二叉查找树 [AVL] #include "stdio.h" #include "st ...

  3. Sql Server 复制表

    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,fiel ...

  4. java的poi技术下载Excel模板上传Excel读取Excel中内容(SSM框架)

    使用到的jar包 JSP: client.jsp <%@ page language="java" contentType="text/html; charset= ...

  5. ZOJ 3913 Bob wants to pour water ZOJ Monthly&comma; October 2015 - H

    Bob wants to pour water Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge There i ...

  6. Masonry 控件详解

    1.   Masonry的属性 @property (nonatomic,strong,readonly)MASConstraint *left; //左侧 @property(nonatomic,s ...

  7. 关于 ElesticSearch 安装

    ElesticSearch windows 下安装步骤 1. 配置 JAVA_HOME 环境变量,因为作者是一个java开发人员,这是基本配置,就不多做赘述 2. 安装ElasticSearch 从官 ...

  8. &lbrack;转&rsqb; xgboost

    还是不太明白,先mark一下 https://blog.csdn.net/v_july_v/article/details/81410574

  9. eclipse中alt&plus;&sol;失效的几种解决方法

    1.次方法用于没有一点提示的情况:依次打开eclipse上面的windows ——preferences ——java ——editor —— content assist ,在右上方有一行“sele ...

  10. 【转】 聚类算法-Kmeans算法的简单实现

    1. 聚类与分类的区别: 首先要来了解的一个概念就是聚类,简单地说就是把相似的东西分到一组,同 Classification (分类)不同,对于一个 classifier ,通常需要你告诉它“这个东西 ...