<!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. centos mysqldb 安装

    yum install mysql-devel.x86_64 yum install python-devel pip install MySQL-python

  2. [转]Mysql海量数据存储和解决方案之一—分布式DB方案

    1)  分布式DB水平切分中用到的主要关键技术:分库,分表,M-S,集群,负载均衡 2) 需求分析:一个大型互联网应用每天几十亿的PV对DB造成了相当高的负载,对系统的稳定性的扩展性带来极大挑战. 3 ...

  3. phpcms--模型管理，推荐位管理，类别管理

    phpcms的默认设置不一定能满足需求,这个时候必须启用[模型管理],[推荐位管理],[类别管理]三个高级功能 为什么需要使用这些功能呢,因为后台添加内容的时候需要不同的模型 而模型通过什么来展现呢, ...

  4. 查找问题的利器 - Git Blame

    原文: http://gitbook.liuhui998.com/5_5.html  如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择. 只要运行'git blame [ ...

  5. 《oracle每日一练》oracle截取字符的函数

    转载 在Oracle中 可以使用instr函数对某个字符串进行判断,判断其是否含有指定的字符. 在一个字符串中查找指定的字符,返回被查找到的指定的字符的位置. 语法: instr(sourceStri ...

  6. js里面的 InttoStr 和 StrtoInt

    javascript 字符串 和 数字的转换,话说好灵活,感觉回不去pascal了 int转换string: 1,var str=String(int); 2,num.toString(param) ...

  7. php bom \ufeff

    2015年5月29日 16:50:56 星期五 五月的最后一个周五............. 前两天遇到一个问题 PHP 返回json数据, 其他人死活解析不出来 json_last_error(); ...

  8. Linux下安装Scala

    Linux下安装Scala和Windows下安装类似,步骤如下: 首先访问下载链接:http://www.scala-lang.org/download/默认这里下载的是Windows版本,这时点击上 ...

  9. ACM/ICPC 之 数论-斐波拉契●卢卡斯数列(HNNUOJ 11589)

    看到这个标题,貌似很高大上的样子= =,其实这个也是大家熟悉的东西,先给大家科普一下斐波拉契数列. 斐波拉契数列 又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.… ...

  10. 8.SpringMVC参数传递

    页面参数传递到controller, 可被同名(与页面标签上的name名对应)的参数接收,用request设值,页面再取出来. 注意乱码解决办法: ①如果是get提交,则在tomcat的server. ...