FileUpload上传图片(图片不变形)

代码如下:

<style type="text/css">
#newPreview
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=images);
}
</style>
<script type="text/javascript" language="javascript">
function PreviewImg(imgFile)
{
　　var newPreview = document.getElementById("newPreview");
　　newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
　　newPreview.style.width = newPreview.offsetWidth /2;　　
　　newPreview.style.height = newPreview.offsetHeight / 2;　　
　　newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
}
</script>

请选择一个图片进行预览：


代码如下:

<input type="file" size="20" onchange="javascript:PreviewImg(this);" />
<div id="newPreview"></div>

赞 (0)

相关推荐

  • FileUpload使用Javascript检查扩展名是否有效实现思路

    FileUpload使用Javascript检查扩展名是否有效实现思路

    通用的检查方法.首先定义好有效的文件扩展名,存放在阵列中. 在JavaScript获取FileUpload控件的文件路径,并取得路径中的文件扩展名.再与阵列中的扩展名比较,如果存在,说明上传的文件是有效的,反之无效. 复制代码 代码如下: <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="btnUpload" runat="server

  • FileUpload 控件 禁止手动输入或粘贴的实现代码

    html标签: <input type="text" name="txt" onkeydown="event.returnValue=false;" onpaste="return false" /> 服务器控件: <asp:TextBox ID="txt" runat="server" onkeydown="event.returnValue=false;&

  • FileUpload上传图片前实现图片预览功能(附演示动画)

    FileUpload上传图片前实现图片预览功能(附演示动画)

    看看效果:  在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片. 复制代码 代码如下: View Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmln

  • FileUpload1 上传文件类型验证正则表达式

    复制代码 代码如下: <asp:RegularExpressionValidator   id="FileUpLoadValidator" runat="server"   ErrorMessage="Upload Jpegs and Gifs only."   ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF)

  • FileUpload 控件禁止手动输入的方法

    html标签: <input type="text" name="txt" onkeydown="event.returnValue=false;" onpaste="return false" /> 服务器控件: <asp:TextBox ID="txt" runat="server" onkeydown="event.returnValue=false;&

  • fileupload控件 文件类型客户端验证实现代码

    无标题页 function CheckFileType() { var objButton=document.getElementById("Button1");//上传按钮 var objFileUpload=document.getElementById('FileUpload1');//FileUpload var objMSG=document.getElementById('msg');//显示提示信息用的DIV var FileName=new String(objFile

  • FileUpload上传图片(图片不变形)

    复制代码 代码如下: <style type="text/css"> #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=images); } </style> <script type="text/javascript" language="javascript"> function Prev

  • ASP.NET FileUpload 上传图片实例

    复制代码 代码如下: <table style="width: 100%"> <tr> <td> <asp:ValidationSummary ID="ValidationSummary1" runat="server" /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /&g

  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程

    开启Fckeditor上传图片功能 考虑到目录安全性问题,默认Fckeditor2.6.6上传功能并未开启,所以第一步我们必须开启Fckeditor上传功能,这里需要注意,由于PHP版本Fckeditor上传功能需要用到chomod函数对新建目录进行权限设置,所以请务必确认在启用Fckeditor上传功能时PHP环境的用户具有创建和更改上传目录的权限. 如果没有开启Fckeditor上传功能,在点击插入/编辑图像按钮,选择上传,在选择完要上传的文件后点击发送到服务器上按钮时会报错误信息如下 复制

  • 基于HTML5+JS实现本地图片裁剪并上传功能

    基于HTML5+JS实现本地图片裁剪并上传功能

    最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定的头像要求尺寸,那么这整张图片都会作为头像.如果大于规定的尺寸,那么用户可以选择要裁剪的区域.用户点击确定按钮,就将裁剪得到的图片数据发送到服务器,在后端将图片数据保存成一个文件. 要完成上述功能,涉及到的知识有:ajax,canvas和html5中的files接口.我将实现这个功能的代码封装到了4

  • Vue+Vant 图片上传加显示的案例

    前端开发想省时间就是要找框架呀!找框架! vant中上传图片组件:https://youzan.github.io/vant/#/zh-CN/uploader 上传图片的组件uploader: <van-uploader :after-read="onRead" accept="image/*" multiple> <imgclass="head-img" src="/static/images/addpic.png&

  • JavaScript实现图片瀑布流和底部刷新

    JavaScript实现图片瀑布流和底部刷新

    瀑布流现在基本上是图片显示网页的标配,主要是为了适配图片和文字块的大小,使显示出的效果没有那么呆板 实现这个功能首先要有html,css和js基础 首先先实现瀑布流 即下一行的图片放在上一行的凹下去的地方 基本的html代码如下 <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="style

  • Android多点触控实现对图片放大缩小平移，惯性滑动等功能

    Android多点触控实现对图片放大缩小平移，惯性滑动等功能

    文章将在原有基础之上做了一些扩展功能: 1.图片的惯性滑动 2.图片缩放小于正常比例时,松手会自动回弹成正常比例 3.图片缩放大于最大比例时,松手会自动回弹成最大比例 实现图片的缩放,平移,双击缩放等基本功能的代码如下,每一行代码我都做了详细的注释 public class ZoomImageView extends ImageView implements ScaleGestureDetector.OnScaleGestureListener, View.OnTouchListener , V

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • PHP Imagick完美实现图片裁切、生成缩略图、添加水印

    本文实例讲解了PHP使用Imagick 裁切.生成缩略图.添加水印自动检测和处理,支持gif,分享给大家供大家参考,具体内容如下 调用方式: include 'imagick.class.php'; $image = new lib_image_imagick(); $image->open('a.gif'); $image->resize_to(100, 100, 'scale_fill'); $image->add_text('1024i.com', 10, 20); $image-

随机推荐