<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. redis学习--String数据类型。

    本文摘自:http://www.cnblogs.com/stephen-liu74/archive/2012/03/14/2349815.html 一.概述: 字符串类型是Redis中最为基础的数据存 ...

  2. FFmpeg 的sws_getContext函数 、sws_scale函数

    FFmpeg里面的sws_scale库可以在一个函数里面同时实现:1.图像色彩空间转换:2.分辨率缩放:3.前后图像滤波处理. 其核心函数主要有三个: // 初始化sws_scalestruct Sw ...

  3. elasticsearch监控平台cerebro-0.8.3 相关操作

    上面这个平台是cerebro-0.8.3  在github上找就有了 #################### GET /hnscan_source_o_comm_drv_bad_bhv_occur/ ...

  4. 【学习笔记-中国剩余定理】POJ1006 Biorhythms

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 139500   Accepted: 44772 Des ...

  5. 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)

    问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...

  6. IronPython for ASP.NET 部署注意事项

    用 IronPython for ASP.NET 开发的网站,在部署时,除了发布 bin 目录下的 IronPython.dll, IronMath.dll, Microsoft.Web.IronPy ...

  7. Python模块-logging模块(二)

    logging模块记录日志有四个主要类:logger,handler,formatter,filter logger提供了应用程序可以直接使用的接口,每个程序在输出信息之前都要获得一个Logger h ...

  8. 使用jquery扩展表格行合并方法探究

    1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...

  9. 为什么并行测试很困难以及如何使用 ConTest 辅助测试

    众所周知并行程序设计易于产生 bug.更为严重的是,往往在开发过程的晚期当这些并行 bug 引起严重的损害时才能发现它们并且难于调试它们.即使彻底地对它们进行了调试,常规的单元测试实践也很可能遗漏并行 ...

  10. 3.JasperReports学习笔记3-在浏览器生成PDF文件

    转自:https://i.cnblogs.com/posts?categoryid=921197 一.新建web工程,导入jasperreports所需的jar包,配置web.xml <serv ...