<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. poj 1845 Sumdiv（约数和，乘法逆元）

    题目: 求AB的正约数之和. 输入: A,B(0<=A,B<=5*107) 输出: 一个整数,AB的正约数之和 mod 9901. 思路: 根据正整数唯一分解定理,若一个正整数表示为:A= ...

  2. RenderingPath 渲染路径

    http://blog.csdn.net/lichaoguan/article/details/42554821 RenderingPath 渲染路径 Deferred Lighting 延时光照 延 ...

  3. 问题4：对dict、list、tuple中的元素排序

    一)对字典中元素排序   方法一:利用sorted的key参数进行排序 from random import randint date = {k:randint(0, 20) for k in ran ...

  4. Otter入门简介

    一.Otter简介 1.1  otter是什么? otter 译意: 水獭,数据搬运工 语言: 纯java开发 定位: 基于数据库增量日志解析,准实时同步到本机房或异地机房的mysql/oracle数 ...

  5. RS485波特率问题

    转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/51683648 最近再做一个项目,发现485不能发送数据,感到非常奇怪!后来查阅相关 ...

  6. PowerDesigner生成CDM模型

    一.新建概念数据模型  1)选择File-->New,弹出如图所示对话框,选择CDM模型(即概念数据模型)建立模型. 2)完成概念数据模型的创建.以下图示,对当前的工作空间进行简单介绍.(以后再 ...

  7. Mac 远程连接Linux服务器及上传、下载命令

    1.使用ssh命令连接远程服务器主机 1.不设置端口,默认就是22 ssh root@192.168.18.129 1.1.设置端口例: ssh -p 22 root@192.168.18.1292. ...

  8. Improving Deep Neural Networks 笔记

    1 Practical aspects of Deep Learning 1.1 Train/Dev/Test sets 在小样本的机器学习中,可以分为60/20/20. 在大数据训练中,不需要划分很 ...

  9. nodejs PK php全方位比较PHP的Node.js的优缺点

    全方位比较PHP的Node.js的优缺点 http://www.techug.com/php-vs-node-js

  10. DBVisualizer Pro for mac

    公司使用的是DB2数据库,支持DB2的数据库客户端常用的有DBeaver和DBVisualizer.DBeaver是免费的,但本人电脑安装后,启动一直报错,问题一直没解决就放弃了.改用DBVisual ...