<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>支持图片上传预览的uploadPreview.js插件</title>

<script src="js/uploadPreview.js"></script>

</head>

<body>

<!-- 代码部分begin -->

<ul id="warp">

　　<li>

　　　　<input type="file" id="up_img_a" />

　　　　<img id="imgShow_a" width="100" height="100" />

　　</li>

　　<li>

　　　　<input type="file" id="up_img_b" />

　　　　<img id="imgShow_b" width="100" height="100" />

　　</li>

</ul>

<!-- 代码部分end -->

<script type="text/javascript">

　　function file_click(){

　　　　new uploadPreview({ UpBtn: "up_img_a", ImgShow: "imgShow_a"});

　　　　new uploadPreview({ UpBtn: "up_img_b", ImgShow: "imgShow_b"});

　　}

　　window.onload = file_click;

</script>

</body>

</html>

　　下载地址：files.cnblogs.com/files/qhorse/支持图片上传预览的uploadPreview.js插件.rar

单图上传预览(uploadpreview )的更多相关文章

  1. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  2. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  3. JQ上传预览+存数据库

    因为之前老师讲的方法有不少BUG 现在经过完善已经修复 之前老是讲的方法是每一张都会被传到后台文件夹里面去 导致在预览过程中如果刷新页面 那么预览的图片不能从后台文件夹中删除  这个方法实现在本地预览 ...

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

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

  5. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

  6. ux.plup.File plupload 集成 ux.plup.FileLis 批量上传预览

    //plupload 集成 Ext.define('ux.plup.File', { extend: 'Ext.form.field.Text', xtype: 'plupFile', alias: ...

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

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

  8. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. Fibonacci 1

    Fibonacci 1 题面 \[F_0=0,F_1=1,F_n=F_{n-1}+F_{n-2}\] 给定\(n\),求 \[S(n)=\sum_{i=1}^{n}F_nF_{n-1}\] 数据格式 ...

  2. Tomcat启动服务报错：Unknown version string [3.1]. Default version will be used.

    用Intellij IDEA 部署Web项目,Tomcat启动后报错Unknown version string [3.1]. Default version will be used. 作者的问题出 ...

  3. UIImage 在某些控件上被放大问题

    今天用到了UISlider,想利用slider.setThumbImage(UIImage(named:"aaa"), forState: UIControlState.Norma ...

  4. Greedy:Physics Experiment(弹性碰撞模型)(POJ 3848)

    物理实验 题目大意:有一个与地面垂直的管子,管口与地面相距H,管子里面有很多弹性球,从t=0时,第一个球从管口求开始下落,然后每1s就会又有球从球当前位置开始下落,球碰到地面原速返回,球与球之间相碰会 ...

  5. Linux中环境变量文件及配置（转载）

    一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...

  6. 【python】sqlite使用

    官方文档:https://docs.python.org/2/library/sqlite3.html sqlite教程:http://www.runoob.com/sqlite/sqlite-del ...

  7. LeetCode 409 Longest Palindrome

    Problem: Given a string which consists of lowercase or uppercase letters, find the length of the lon ...

  8. Keepalived虚拟ip

    linux下如何设置vip(虚拟ip) 在做HA的时候需要为服务器设计虚拟IP,也就是一个主机对应多个IP地址?刚听起来好神奇,原来这样也是可能的看了下面的这个链接 自己配了一下http://hi.b ...

  9. Get与Post数据长度的限制

    这个问题在我的开发中也遇到,所以在此贴出来(也是在网上搜出来的,呵呵)这是原贴地址http://blog.csdn.net/somat/archive/2004/10/29/158707.aspx两个 ...

  10. SQL语句简介

    1.Top.Distinct Top 获取前几条数据,top一般都与order by连用 获得年纪最小的5个学生  select top 5 * from A order by classesId 获 ...