在做web项目很多的时候图片都是避免不了的，所以操作图片就成了一个相对比较棘手的问题，其实也不是说很麻烦，只是说上传然后直接预览的过程很恶心，今天简单的做一个处理。

效果预览：

<!DOCTYPE html>

<html>

<head>

<title>HTML5上传图片预览</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

</head>

<body>

<h3>请选择图片文件：JPG/GIF</h3>

<form name="form0" id="form0">

<input type="file" name="file0" id="file0" multiple="multiple" /><br>

        <img src="" id="img0" style="width: 20rem;height: 15rem;">

</form>

<script>

$("#file0").change(function(){

         var objUrl = getObjectURL(this.files[0]) ;//获取文件信息

         console.log("objUrl = "+objUrl);

          if (objUrl) {

          $("#img0").attr("src", objUrl);

         }

}) ;

function getObjectURL(file) {

         var url = null;

         if (window.createObjectURL!=undefined) {

          url = window.createObjectURL(file) ;

         } else if (window.URL!=undefined) { // mozilla(firefox)

          url = window.URL.createObjectURL(file) ;

         } else if (window.webkitURL!=undefined) { // webkit or chrome

          url = window.webkitURL.createObjectURL(file) ;

         }

         return url ;

        }

        </script>

</body>

</html>

简单的做一个图片上传预览（web前端）的更多相关文章

  1. VUE2.0+VUE-Router做一个图片上传预览的组件

    之前发了一篇关于自己看待前端组件化的文章,但是由于学习和实践的业务逻辑差异,所以自己练习的一些demo逻辑比较简单,打算用vue重构现在公司做的项目,所以在一些小的功能页面上使用vue来做的,现在写的 ...

  2. ___简单的MVC单个图片上传预览

    js: $("#btnImg").click(function () { $("#form0").ajaxSubmit({ url: "/Studen ...

  3. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  6. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  7. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  8. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  9. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

随机推荐

  1. 遇到以前跑一次却没问题的问题，直接maven install 再跑

    遇到以前跑一次却没问题的问题,直接maven install 再用tomcat 跑 比如,xml 路径找不到类,奇葩的报错啊

  2. mysql 案例 ~ 主从复制延迟之并行复制

    一 概念说明   1 模型 并行复制是典型的生产者.消费者模式,Coordinator作为生产者,worker线程作为消费者.   2 Waiting for preceding transactio ...

  3. mysql 原理 ~ 线程与IO

    一 简介:今天来聊聊具体的线程和IO 二 具体线程与作用 1 master thread    mysql的主要工作触发线程 1 redo and binlog日志      2 合并插入缓冲.    ...

  4. Flask恋爱的一瞬间

    python的三大框架:Flask:轻量级框架 Django:重量级框架 Tornado:性能最好,异步框架 Flask初学 #导包 from flask import Flask #建立flask对 ...

  5. 20165337第七周实验报告《Java面向对象程序设计》

    实验报告封面 实验内容及步骤 实验一.实现百分制成绩转成"优.良.中.及格.不及格"五级制成绩的功能 代码 public class MyUtil{ public static S ...

  6. python第四天，list补充

    当我们创建的列表中,元素的排列顺序常常是无法预测的,因为我们并非总能控制用户提供数据的顺序.这虽然在大多数情况下都是不可避免的,但我们经常需要以特定的顺序从呈现信息.有时候,我们希望保留列表元素最初的 ...

  7. VMware虚拟机环境配置--网络配置

    Hadoop集群搭建第一篇. 环境: VMware workstation 12, centos 6.5 配置虚拟机网络连接模式为NAT模式(共享主机的ip地址). 桥接模式: 和主机windows是 ...

  8. HDU - 2665 Kth number 主席树/可持久化权值线段树

    题意 给一个数列,一些询问,问$[l,r]$中第$K$大的元素是哪一个 题解: 写法很多,主席树是最常用的一种之一 除此之外有:划分树,莫队分块,平衡树等 主席树的定义其实挺模糊, 一般认为就是可持久 ...

  9. Centos7.3_x86_64通过systemctl控制tomcat8.0.46启动和停止

    Centos7.3_x86_64通过systemctl控制tomcat8..46启动和停止 之前在centos 6上通过脚本控制tomcat 启动和停止的脚本,虽然在centos 7也可以使用,但ce ...

  10. php password_hash

    2018-1-6 17:22:13 星期六 php 自带的密码生成方法, 如果生成密码最好使用这个, 这个是"单程"的, 没有解密函数 $a = '123456'; $b = pa ...