<!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. python egg文件解压

    unzip 就可以了. 由于项目需要将某些版本的库打包,然后 sys.path.insert方式引用(避免升级包导致某些旧的系统崩掉). 在将egg文件打包时,发现不可用.但相关模块的__path__ ...

  2. JavaScript基础介绍

    JavaScript组成 •ECMAScript:解释器.翻译 •DOM:Document Object Model •BOM:Browser Object Model –各组成部分的兼容性,兼容性问 ...

  3. HIFI播放器--磨机吐槽篇

    最近看到淘宝店提供各种随身播放器磨机服务,说的是天花乱坠,给你更换零件, 甚至更改电路,搭载上去,是如何如何的好,整个播放器就上升了几个等次,收费还 不低,至少是好几百,我实在是忍不住吐槽了,你们这些 ...

  4. phpcms 无法显示缩略图 Call to undefined function image_type_to_extension

    问题背景: 线下的phpcms项目没问题,线上的phpcms新添加的图片缩略图显示有问题,查看了一下php版本,线下是5.5的,线上的是5.1的 问题原因: 看了一下线上的错误日志,显示: PHP F ...

  5. espcms列表页ajax获取内容 - 并初始化swiper

    <link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...

  6. Docker与LXC的区别

    转自: http://blog.csdn.net/wangtaoking1/article/details/45043523 Docker并不是LXC的替代品,Docker的底层就是使用了LXC来实现 ...

  7. 在中文windows下使用pywinauto进行窗口操作

    这两天开始接触pywinauto,听说百度的自动化QA也用这个模块,于是来了兴趣,但网上的教程很少,而且基本上都是拿官方的notepad来说,首先中文菜单的支持是问题,其次各种操作也没有写清楚,阅读官 ...

  8. FIX_前缀后缀_未提交

    问题 B: FIX 时间限制: 1 Sec  内存限制: 64 MB提交: 38  解决: 11[提交][状态][讨论版] 题目描述 如果单词 X 由单词 Y 的前若干个字母构成,我们称 X 是 Y ...

  9. iOS第三方分享－ShareSDK

    网址链接:http://mob.com/Download/detail?type=1&plat=2 由于新版的简单分享很多功能都有,而且打包后体积比全版本的少了几M所以在这里用这个 1.在官网 ...

  10. asp.net 防止按钮重复提交

    1.将按钮属性设置如下: <asp:Button ID="btConfirm" runat="server" Text="Confirm&quo ...