转载网址：http://blog.sina.com.cn/s/blog_6094f04d0100o6kj.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head>

<SCRIPT   LANGUAGE="JavaScript">

var   flag=false;

function   DrawImage(ImgD){

　　　　var image=new   Image();

　　　　image.src=ImgD.src;

　　　　if(image.width>0   &&   image.height>0){

　　　　flag=true;

　　　　if(image.width>300 || image.height>200)     {

　　　　　　ImgD.width=image.width/2;

ImgD.height=image.height/2;

　　　　　　ImgD.alt=image.width+"×"+image.height;

　　　　}    else    {

　　　　　　ImgD.width=image.width;

　　　　　　ImgD.height=image.height;

　　ImgD.alt=image.width+"×"+image.height;

　　　　}

　　}

}

function   mainChange(Value){

　　flag=false;

　　document.all.mainimage.width=5;

　　document.all.mainimage.height=5;

　　document.all.mainimage.alt="";

　　document.all.mainimage.src=Value;

　　document.all.maindiv.style.display='';

}

</SCRIPT>

<TABLE   border="0">

　　<TBODY>

　　　　<tr>

　　　　　　<td   height="22"   colspan="5">  　　　　　　

　　　　　　　　top:<input   type="file"   name="up1"   style="width:300"   class="textbox"  onChange="javascript:mainChange(this.value);">

　　　　　　</td>

　　　　</tr>

　　</TBODY>

</TABLE>

<table height="78"   border="0"   cellpadding="0"   cellspacing="0">

　　<tr>

　　　　<td  >

　　　　　　<div   id="maindiv" style="display:none">

　　　　　　　　<IMG   id=mainimage height=70 width=20 src="" onload="javascript:DrawImage(this);"   >

　　　　　　</div>

　　　　</td>

　　</tr>

</table>

<body> </body>

</html>

转载：js实现上传图片时 点击浏览后 就可以看到缩略图 很实用的更多相关文章

  1. js中怎么使点击按钮后文本框获得焦点

    <html> <head> <script type="text/javascript"> function setFocus() { docu ...

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

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

  3. Web Uploader初始化隐藏容器失败及点击上传图片时反应较慢的问题

    问题1:在一个页面集成一个或者多个文件上传插件,初始化时有些DOM容器是隐藏的,这时候经常会出现初始化失败的情况,虽然按钮样式改变了,但是点击就是没反应(有时候不经意点了哪个地方,或许会出现文件选择框 ...

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

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

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

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

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

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

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

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

  8. 怎么用js设置a标签点击链接改变当前颜色

    怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...

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

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

随机推荐

  1. linux内核学习之三：linux中的"32位"与"64位"

    在通用PC领域,不论是windows还是linux界,我们都会经常听到"32位"与"64位"的说法,类似的还有"x86"与"x86 ...

  2. Android学习笔记--AlertDialog应用

    1. 自定义实现带图标的TextView IconTextView.java package com.evor.andtest; import android.content.Context; imp ...

  3. MySQL 优化方案

    基本上通过索引来解决 . 通常索引键在where , group by , order by 相关的列 一个表只能用一个索引(查询的时候)所以当要执行复杂查询时最好使用联合索引就是 index (a, ...

  4. linux tee 命令详解

    man tee: NAME tee - read from standard input and write to standard output and files SYNOPSIS tee [OP ...

  5. elasticsearch 修改内存

    [elk@zjtest7-redis bin]$ cat elasticsearch.in.sh if [ "x$ES_MIN_MEM" = "x" ]; th ...

  6. HIbernate Oracle存储过程

    之前为了实现基于Hibernate+Oracle的存储过程调用,发现了一个又一个坑,然后一个一个的尝试解决. 需求:使用Hibernate调用Oracle的存储过程,需要支持的有动态表名.存储过程变量 ...

  7. HDU5044---Tree 树链剖分

    大致题意:add1 u v   u到v路径上所有点的权值加上k,add2  u 到v路径上所有边的权值加上k 最后输出所有点的权值,边的权值..树链剖分预处理然后来个线性O(n)的操作.刚开始用线段树 ...

  8. mysql 获取当前时间戳

      mysql 获取当前时间为select now() 运行结果: 2012-09-05 17:24:15 mysql 获取当前时间戳为select unix_timestamp(now()) 运行结 ...

  9. tomcat下配置https环境

    在网上搜了一下,内容不是非常完好. 现进行整理,做个学习笔记,以备以后使用. (1)进入到jdk下的bin文件夹 (2)输入例如以下指令"keytool -v -genkey -alias ...

  10. BuguMongo是一个MongoDB Java开发框架，集成了DAO、Query、Lucene、GridFS等功能

    http://code.google.com/p/bugumongo/ 简介 BuguMongo是一个MongoDB Java开发框架,它的主要功能包括: 基于注解的对象-文档映射(Object-Do ...