<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>添加商品分类</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script>

<script type="text/javascript" src="<%=basePath %>js/uploadPreview.js"></script>

</head>

<table>

<tr>
<th>
图片路径:
</th>
<td>
<input type="file" id="TImgSrc" name="TImgSrc" accept="image/*" class="formText {required: true}"/>
<label class="requireField">*</label>
</td>
</tr>
<tr>
<th>
</th>
<td>
<img id="uploadImage" style="widows: 110px; height: 110px" src="<%=basePath %>images/avatarBg.png" class="uploadImage"/>
</td>
</tr>
</table>

<script type="text/javascript" >

$(document).ready(function(){
$("#TImgSrc").uploadPreview({ Img: "uploadImage", Width: 280, Height: 280, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
});
</script>

效果：上传一个图片实时显示

使用js文件：uploadPreview.js下载路径：http://files.cnblogs.com/files/flywang/uploadPreview.js

上传图片时实时显示功能使用uploadPreview.js的更多相关文章

  1. 前端AntD框架的upload组件上传图片时遇到的一些坑

    前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...

  2. 关于 百度 Ueditor 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  3. 百度ueditor上传图片时如何设置默认宽高度

    百度ueditor上传图片时如何设置默认宽高度 一.总结 一句话总结:直接css或者js里面限制一下就好,可以用html全局限制一下图片的最大高度 直接css或者js里面限制一下就好,可以用html全 ...

  4. 使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”

    在使用uploadify插件上传图片时,遇到一个比较坑的错误:上传时提示“Cannot read property 'queueData' of undefined”. 遇到这个问题有点无语,因为这个 ...

  5. 百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题

      在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/ima ...

  6. 关于 百度 Ueditor （在chrome浏览器） 上传图片时 打开文件夹的延迟问题

    在使用 ueditor 开发时, 作为一个web文本编辑器使用时. 当点击上传图片时, 文件夹要延迟好久才能打开. 解决: 针对多图片上传, 将/ueditor/dialogs/image/image ...

  7. 上传图片时使用crop进行裁剪

    上传图片时,往往需要对图片进行裁剪. 实现方法为: 1.引入crop.css body{background:#}.upload-container{position:absolute;left:%; ...

  8. 调试台自动多出现一个'&#65279;' ，我 用uploadify上传图片时，在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个'&#65279;'

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  9. wordpress上传图片时重命名--修改插件时遇到的一些问题

    wordpress是用php语言开发的博客平台,它扩展性强,容易扩展,很适合拿来做二次开发. 1,问题由来 本周五,我在浏览公司的网站(基于wordpress开发)时发现,网站首页上有两篇文章的缩略图 ...

随机推荐

  1. CI中控制器名不能和本个 控制器中的方法名相同

    控制器名称:application/controllers/tang.php 控制器中方法名称:application/controllers/role.php  中有方法 public  funct ...

  2. mysql编码

    Mysql中文乱码问题完美解决方案 修改查看MYSQL字符集(charset) MySQL 乱码之我见 10分钟学会理解和解决MySQL乱码问题 /etc/mysql/my.cnf /etc/init ...

  3. ONVIF Device Manager v2.2.146

    对接ONVIF使用软件,用于对接支持onvif协议的IPC厂家设置 http://download.csdn.net/detail/li_dabo/9761415

  4. fedora使用mac osx字体和渲染方式

    fedora 19的倒退(中文显示有问题)让人感到很沮丧,不过,后来还是找到了一个很好的解决方案:使用max osx的字体和渲染方式 1. 安装infinality字体渲染软件: rpm -Uvh h ...

  5. javascript中eval()函数使用方法

    本教程主要重介绍eval()函数的语法与使用方法,及在后面我还补充了eval()解析json数据的相关例子,希望文章能帮助到各位深入理解eval()使用方法吧.   前几天说到js中尽量不要使用eva ...

  6. bzoj 3998 弦论 —— 后缀自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3998 关于相同子串算一个还是算多个,其实就是看一种状态的 right 集合是否加上 Pare ...

  7. docker-ce安装与搭建私有仓库

    https://www.cnblogs.com/sszhou/p/7389144.html 系统环境centos7 ###docker-ce安装###1.卸载老版本,较老版本的Docker被称为doc ...

  8. 如何避免这个delete from tb_name不带条件的操作

    那么,我们如何避免这个delete from tb_name不带条件的呢?其实是有办法的,但这只针对运维DBA或者DBA在操作时候有用,但对于PHP和JAVA程序,它的连接操作方式,就没办法避免了 s ...

  9. form+iframe实现ajax文件上传

    在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...

  10. MySQL on Azure高可用性设计 DRBD - Corosync - Pacemaker - CRM (一)

    MySQL迁移到Azure上后,由于云的特性,在自建数据中心的MySQL的HA的方法在云上很多都不能部署. 这主要是因为,目前Public Cloud不支持:1. 共享存储:2. Multicast: ...