<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. cocos2dx & cocostudio 实现模态对话框

    用cocos2dx实现模态对话框 http://www.cnblogs.com/mrblue/(转自于) ui部分使用了cocoStudio,注意这里没有实现怎么屏蔽其他的输入事件,其他的文档已经太多 ...

  2. 【二叉树的递归】07路径组成数字的和【Sum Root to Leaf Numbers】

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,节点的值仅限于从0 ...

  3. C语言逗号运算符和逗号表达式

    在C语言中逗号","也是一种运算符,称为逗号运算符. 其功能是把两个表达式连接起来组成一个表达式, 称为逗号表达式.其一般形式为:表达式1,表达式2 其求值过程是分别求两个表达式的 ...

  4. FFmpeg内存操作（三）内存转码器

    相关博客列表 : FFMPEG内存操作(一) avio_reading.c 回调读取数据到内存解析 FFMPEG内存操作(二)从内存中读取数及数据格式的转换 FFmpeg内存操作(三)内存转码器 本文 ...

  5. xdebug浏览器调试参数

    XDEBUG_SESSION_START=phpstorm-xdebug 找到对应PHP版本的 Xdebug ,后面带 TS 的为线程安全,本机环境为 win7 64 + php-5.5.1-Win3 ...

  6. 1. Two Sum[LeetCode 简单 by 大志]

    1. 二数之和 题目 English Given an array of integers, return indices of the two numbers such that they add ...

  7. hdu 5616 Jam's balance 正反背包+转换

    http://acm.hdu.edu.cn/showproblem.php?pid=5616 思路 题目中蕴含着两种需要计算的重量 1. 从所有的砝码中挑出任意种2.(转换的思想)在天平的两端都挑出这 ...

  8. HTML DOM setTimeout() 方法

    转自:http://www.w3school.com.cn/jsref/met_win_settimeout.asp 1.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. &l ...

  9. 【转】GitHub使用

    1.设置Git全局用户配置 git config --global user.name "xxx" git config --global user.email xxx@gmail ...

  10. hive 集群初探，查询比较

    在slave3安装MySQL作为hive 的matastore [root@slave3 hadoop]# yum search mysql [root@slave3 hadoop]# yum ins ...