在做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. NIO & Netty框架学习

    channle buffer selector.selectionKey 关于websocket http://lixiaohui.iteye.com/blog/2328068 长连接和短连接 htt ...

  2. STL之permutation/ equal_range/ binary_range学习

    1,is_permutation 函数,判断其中一个序列是不是另外一个序列的全排列. 包括四个参数,前两个是第一个数组需要判断的起始位置和终止位置.后两个是第二个数组需要判断的起始位置和终止位置. # ...

  3. Javascript - ExtJs - Toolbar - 工具栏

    Toolbar组件 创建工具栏 Toolbar类是一种子组件,它不能独立存在,需要依附在其它组件上面.很多容器组件都具备tbar(顶部工具栏).bbar(底部工具栏)的配置,所以可以像下面那样使用它. ...

  4. 网络爬虫re模块的findall()函数

    findall()函数匹配所有符合规律的内容,并以列表的形式返回结果. a = '"<div>指数' \ '</div>"' word = re.finda ...

  5. SNet解读

    解读论文:Learning Local Image Descriptors with Deep Siamese and Triplet Convolutional Networks by Minimi ...

  6. Go语言中的slice

    Go语言中的slice有点类似于Java中的ArrayList,但在使用上更加灵活,先通过下面一个小例子来体验一下如何通过一个已有的切片来产生一个新切片: func main() { slice := ...

  7. 6个Async/Await完胜Promise的原因

    友情提醒:NodeJS自从7.6版开始已经内置了对async/await的支持.如果你还没用过该特性,那么接下来我会给出一系列的原因解释为何你应该立即开始使用它并且会结合示例代码说明. async/a ...

  8. Anaconda安装新模块

    如果使用import导入的新模块没有安装,则会报错,下面是使用Anaconda管理进行安装的过程:1.打开Anaconda工具,如图: 2.可通过输入 conda list 查看已安装的模块 3.如果 ...

  9. Callcenter 模块解析

    CallCenter模块详细介绍 一. Callcenter模块说明: 提供了呼叫中心的ACD功能,把客户端通过不同的”方案”和”等级”分配给来电,一个以”评分”为基础的系统是用来分配这些呼入.来电者 ...

  10. event & signals & threads

    The Event Systemhttp://doc.qt.io/qt-4.8/eventsandfilters.html Each thread can have its own event loo ...