本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加)。

QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29LoD19)    QQ:1542385235

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="buexplain">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<body>
    <input type="file" id="imgfile">
    <img id="imgsrc" src="">
    <script>
        $(function() {
            $("#imgsrc").hide();
            $("#imgfile").change(function() {
                var objUrl = getObjectURL(this.files[0]);
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $("#imgsrc").attr("src", objUrl);
                    $("#imgsrc").show();
                }
            });
 
            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    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>

本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加)。

QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29LoD19)    QQ:1542385235

我的淘宝店,可以进去逛逛噢:https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop

jquery预览本地图片的更多相关文章

  1. IE7+ 浏览器兼容预览本地图片

    css #preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); o ...

  2. vue预览本地图片

    <template> <div> <a href="javascript:void(0);" @change="addImage" ...

  3. 预览本地图片原生js

    <!-- 样似总结: 用a标签代替file,做文件上传. 将file进行绝对定位,透明度设置为0:宽度为“上传图片”的宽度,超出部分隐藏. 这样做是为了将file隐藏起来.用a标签代替file ...

  4. javascript预览本地图片

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  6. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  7. input type=file实现图片上传,预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  9. es5预览本地文件、es6练习代码演示案例

    es6简单基础: <!DOCTYPE html> <html> <head> <meta name="viewport" content= ...

随机推荐

  1. 从txt导入数据到mysql

    当要往mysql的table中录入数据量大的时候,直接从txt录入已有数据是一个愉快的选择. 在录入数据前要做一些格式上的准备 1. txt编码要是utf-8,无BOM 2. 每行以\t\n结尾,每列 ...

  2. 三步解决IDEA系列开发工具 RubyMine、IntelliJ IDEA 卡顿问题

    近日有小伙伴跟我反映说自己的开发工具很卡,有没有什么解决方案?答案是当然有啦!接下来看看怎么设置! 1.打开RubyMine,或IDEA,上边工具栏选择Help,下拉选择Edit Custom VM ...

  3. python学习笔记:(十)函数

    python中定义函数使用def关键字,一般格式如下: def 函数名(参数列表): 函数体 如: #无参数 def helloworld(): print("Hello World!&qu ...

  4. dapper使用时性能优化

    数据库中类型 Area 数据库类型 varchar dapper 来操作数据库,不能直接写 sql      Area=@Area)   //dapper 对C#中的字符串类型 默认是对应数据库nva ...

  5. windows 快捷键 部分

    1.快速启动任务栏锁定的任务 WIN+任务栏任务顺序(左侧开始数) 2.运行 WIN+R mstsc--->远程桌面链接 regedit--->注册表信息 services.msc---& ...

  6. Pytorch笔记 (1) 初始神经网络

    一.人工神经元 上方人工神经元中: 输入 * 权重 ——>  相当于 人神经元中  树突的功能 各输入 相加 ,再做非线性变化f ——>  相当于胞体的功能 将非线性变化的结果输出 ——& ...

  7. 什么是token?你是怎么理解token?

    1.Token的引入: Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生. 2. ...

  8. Hibernate——简单的增、删、改、查操作

    思路: 1.导入hibernate jar包 2.导入mysql jar包 3.创建数据库 4.创建java实体类 5.编写hibernate.cfg.xml配置文件 6.编写dao类 目录: 数据表 ...

  9. 数组被遗忘的内置对象--》Array.find()

    需求:一个数组包含很多对象,对象中有很多属性.现在给你一个值,且这个值再这个数组的某个对象存在,那么如何找到这个对象? 首先想的是for循环遍历,但这样非常麻烦,js给我们提供了一个find()方法, ...

  10. 深入理解java:2.3.5. 并发编程concurrent包 之容器BlockingQueue(阻塞队列)

    1. 什么是阻塞队列? 阻塞队列(BlockingQueue)是一个支持两个附加操作的队列. 这两个附加的操作是:在队列为空时,获取元素的线程会等待队列变为非空. 当队列满时,存储元素的线程会等待队列 ...