<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. Convolutional Neural Networks for Visual Recognition 3

    Gradient Computing 前面我们介绍过分类器模型一般包含两大部分,一部分是score function,将输入的原始数据映射到每一类的score,另外一个重要组成部分是loss func ...

  2. [原]NYOJ-括号匹配-2（java）

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=2 括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB  ...

  3. HDU1370Biorhythms(中国剩余定理||暴力)

    Some people believe that there are three cycles in a person's life that start the day he or she is b ...

  4. ACM学习历程—广东工业大学2016校赛决赛－网络赛F 我是好人4(数论)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=5 这个题目一看就是一道数论题,应该考虑使用容斥原理,这里对lcm进行容斥. ...

  5. 不支持PowerShell 2.0版本（don't support PowerShell version 2.0. ）

    在“程序包管理器控制台”使用命令“update-database”会提示:The Entity Framework Core Package Manager Console Tools don't s ...

  6. UpdatePanel无刷新

    使用UpdatePanel实现无刷新效果 1. <asp:ScriptManager ID="scriptManger1" ruant="server"& ...

  7. C语言学习笔记--单引号和双引号

    (1)C 语言中单引号用来表示字符字面量(是个数值)被编译为对应的 ASCII 码 (2)C 语言中双引号用来表示字符串字面量(是个指针)被编译为对应的内存地址 例如:'a'表示字符字面量(97),在 ...

  8. shell 自动删除n天前备份

    Linux自动删除n天前备份Linux是一个很能自动产生文件的系统,日志.邮件.备份等.因此需要设置让系统定时清理一些不需要的文件.语句写法:     find 对应目录 -mtime +天数 -na ...

  9. 关于Synchronized关键字锁住对象的嵌套问题

    如果在子关键字代码块中调用了sleep,是否会保留有所的锁?

  10. 服务器环境迁移,Linux centos7 64位 基础环境部署 jdk+tomcat+mysql+nginx

    最近阿里云服务器到期,这个周末连夜将服务器迁移到美国去了,为什么迁移到美国去呢?主要是因为阿里云服务器费用高,另外网站的访问量不大,对网速要求也不高,主要是宣传和信息传递的作用,加上本人之前在***上 ...