<table>
<tr width="100">
<td>上传商场图片:</td>
<td>
<input type="file" name="img" onchange="previewImage(this)">
</td>
</tr>
<tr height=124px;>
<td ></td>
<td >
<inline id="preview">
<img id="imghead" style="width:186px;height:124px;"
src='/image/{$mall_id}/{$activity.img}'>
</inline>
</td>
</tr>
</table>
<script>
// 上传图片时显示图片 js
function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML ='<img id=imghead>'; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; // img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else //兼容IE { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; div.innerHTML = '<img id=imghead>'; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; }
</script>

  

js 显示刚刚上传的图片 (onchange事件)的更多相关文章

  1. js如何展示上传的图片

    前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...

  2. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  3. bootstrap插件fileinput.js 显示无法上传失败

    哪怕图片已经传到服务器上了 依然显示出错 // 处理完成后,必须返回一个json数据,否则会报错误 JSONObject jsonObject = new JSONObject(); jsonObje ...

  4. MVC应用程序显示上传的图片

    MVC应用程序显示上传的图片 前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件 ...

  5. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

  6. MVC应用程序显示上传的图片(续)

    上一篇<MVC应用程序显示上传的图片>http://www.cnblogs.com/insus/p/3597543.html 最后有提及没有实现用户点击图片,显示原图的功能.此篇Insus ...

  7. ext js/Ext.Net_演示 htmleditor 上传&插入图片

    本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能   解决方 ...

  8. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  9. javascript异步上传压缩图片并立即显示图片

    javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...

随机推荐

  1. Mac搭建PHP+rabbitMQ环境

    RabbitMQ是一个在AMQP基础上实现的企业级消息系统.何谓消息系统,就是消息队列系统,消息队列是“”消费-生产者模型“”的一个典型的代表,一端往消息队列中不断写入消息,而另一端则可以读取或者订阅 ...

  2. (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m

    在linux环境下配置项目运行环境时,部署的人员都会分配一下内存,以保证程序正常的运行.其实在开发的时候(window系统),就已经涉及到内存分配了,只是这些参数有默认值,因此一直没有去重视它. 以M ...

  3. 【LeetCode每天一题】Longest Substring Without Repeating Characters(最长无重复的字串)

    Given a string, find the length of the longest substring without repeating characters. Example 1:    ...

  4. mysql数据库字段类型详解

    MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型.本节首先给出可用类型的一个概述,并且总结每个列类型的存储需求,然后提供每个类中的类型性质的更详细的描述. ...

  5. mac上命令行解压rar

    时间进入到2018年12月,mac上好用的rar解压工具要收费了.被逼的没办法,用命令行吧,谁让咱擅长呢? 1,使用Homebrew安装unrar,没有自己装去 brew install unrar ...

  6. DataFrame修改列名

    把Dataframe格式的列名'class1'修改为'class_label' data.rename(columns={"label":"true_label" ...

  7. 使用 nghttpx 搭建 HTTP/2 代理 (转)

    来自http://www.fanyue.info/2015/08/nghttpx-http2.html 使用 nghttpx 搭建 HTTP/2 代理 [转] HTTP/1.1,定义于 1999 年, ...

  8. cocos2dx 3.x(加载网络自定义头像)

    // //  Connection.h //  XXDemo // //  Created by LeeHonGee on 14-9-4. // // #ifndef __XXDemo__Connec ...

  9. Java之.jdk安装-Linux

    Jdk安装-Linux 1. 使用管理员,创建一个用户(charles),指令:useradd charles 2. 给创建的用户,添加密码(密码自己指定),指令:passwd charles 注意: ...

  10. JS实例4

    根据当前年的前五年后五年的年月日 <select id="nian" onclick="Bian()"></select>年 <s ...