<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. 百度接口test

    https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Mk2Orf5pqEOXvYR ...

  2. pandas官方文档阅读收获

    1.当心它里面的简写: 第二张图中的输出实际上是等效于: df = df.drop() df 若只进行下面的操作,则drop操作不会起作用,因为它的inplace默认为False: df.drop() ...

  3. [django]梳理drf知识点2

    外键关系的自动维护 原始提交的server数据 { ... "manufacturer": "DELL", "model_name": &q ...

  4. gem安装出错了

    1.首先是SSL出错. SSL 证书错误 正常情况下,你是不会遇到 SSL 证书错误的,除非你的 Ruby 安装方式不正确. 如果遇到 SSL 证书问题,你又无法解决,请修改 ~/.gemrc 文件, ...

  5. 解决办法: RSA host key for [ip address] has changed and you have requested strict checking.

    在服务器重装后想要远程连接服务器,报错如下: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE ...

  6. CentOS6.5安装RHive

    1.安装RServe软件包(各个节点都要安装) [root@Hadoop-NN-01 mysofts] # R CMD INSTALL Rserve_1.7-2.tar.gz 2.设置环境变量 [ro ...

  7. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

  8. visual studio Lua 调试

    BabeLua是一款基于VS (简称VS)的免费开源的Lua集成开发环境,在Lua编辑和调试方面,具有如下功能和特性: ●Lua语法高亮 ●语法检查 ●自动补全 ●一键注释 ●格式化代码 ●自定义代码 ...

  9. selenium键盘操作

    键盘操作需引用: from selenium.webdriver.common.keys import Keys 操作码表: NULL = '\ue000' CANCEL = '\ue001' # ^ ...

  10. input 滑块功能range javascript方法使用

    <script> var rangelist=document.querySelectorAll('[type="range"]'); for(var i=0; i&l ...