图片上传前预览

最新推荐文章于 2024-06-11 21:59:41 发布
最新推荐文章于 2024-06-11 21:59:41 发布
阅读量386 收藏
点赞数
文章标签： wrapper ie function image input firefox

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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>Firefox3,IE6,IE7,IE8上传图片预览</title>

<style type="text/css">

#preview_wrapper{

display:inline-block;

width:300px;

height:300px;

background-color:#CCC;

}

#preview_fake{ /* 该对象用户在IE下显示预览图片 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

}

#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

visibility:hidden;

}

#preview{ /* 该对象用户在FF下显示预览图片 */

width:300px;

height:300px;

}

</style>

<style type="text/css">

#preview_wrapper{

display:inline-block;

width:300px;

height:300px;

background-color:#CCC;

}

#preview_fake{ /* 该对象用户在IE下显示预览图片 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

}

#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

visibility:hidden;

}

#preview{ /* 该对象用户在FF下显示预览图片 */

width:300px;

height:300px;

}

</style>

<script type="text/javascript">

function onUploadImgChange(sender){

if(!sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){

alert('图片格式无效！');

return false;

}

var objPreview = document.getElementById( 'preview' );

var objPreviewFake = document.getElementById( 'preview_fake' );

var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );

if( sender.files && sender.files[0] ){

objPreview.style.display = 'block';

objPreview.style.width = 'auto';

objPreview.style.height = 'auto';

// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径

objPreview.src =sender.files[0].getAsDataURL();

}else if( objPreviewFake.filters ){

// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果

//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决

// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径

sender.select();

var imgSrc =document.selection.createRange().text;

objPreviewFake.filters.item(

'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

objPreviewSizeFake.filters.item(

'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

autoSizePreview( objPreviewFake,

objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight );

objPreview.style.display = 'none';

}

}

function onPreviewLoad(sender){

autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight );

}

function autoSizePreview( objPre, originalWidth, originalHeight ){

var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight);

objPre.style.width = zoomParam.width + 'px';

objPre.style.height = zoomParam.height + 'px';

objPre.style.marginTop = zoomParam.top + 'px';

objPre.style.marginLeft = zoomParam.left + 'px';

}

function clacImgZoomParam( maxWidth, maxHeight, width, height ){

var param = { width:width,height:height, top:0, left:0 };

if( width>maxWidth || height>maxHeight ){

rateWidth = width / maxWidth;

rateHeight = height / maxHeight;

if( rateWidth > rateHeight ){

param.width = maxWidth;

param.height = height /rateWidth;

}else{

param.width = width / rateHeight;

param.height = maxHeight;

}

}

param.left =(maxWidth - param.width) / 2;

param.top = (maxHeight - param.height) /2;

return param;

}

</script>

</head>

<body>

<div id="preview_wrapper">

<div id="preview_fake">

<img id="preview"onload="onPreviewLoad(this)"/>

</div>

</div>

<br/>

<input id="upload_img"type="file" onchange="onUploadImgChange(this)"/>

<br/>

<img id="preview_size_fake"/><span id="swh"></span>

</body>

</html>

sunyuyong521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 上传图片前预览,HTML实现图片上传前预览
weixin_29344197的博客
06-04 1159
HTML5 Upload#destination{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);}//处理file input加载的图片文件$(document).ready(function(e) {//判断浏览器是否有FileReader接口if(typeof FileRea...
基于layUI的图片上传前预览功能的2种实现方式
weixin_30797199的博客
05-14 2448
上传页面采用了layui 的上传模块，要实现的功能：选择文件后---点击文件名，页面中间弹窗内预览图片，先看效果图： 预览功能的实现具体有2种方式：第一种是用blob+FileReader，第二种是layUI自带的。 1. 用layUI 自带的参数实现图片预览： layui.use('upload', function(){ ... choose: func...
php上传图片并预览
qq_37805832的博客
09-27 2527
php上传文件并预览功能.我使用的是phpstudy.请现在D:\phpstudy_pro\WWW下面新建一个uploads文件夹(文件上传后就存储在uploads哪里哈)
图片上传并预览
热门推荐
JS小学生的博客
08-05 2万+
思路：完成这个功能，首先需要美化上传图片的按钮，然后添加一个&lt;img/&gt;标签，在图片上传之后，用新图片的src替换原来&lt;img/&gt;标签中的src。 如下图所示，是原始的按钮样式： 美化步骤： （1）将上传图片标签采用绝对定位，使之位于一个图片，按钮，div等标签上。或者给图片，按钮或div设置绝对定位，总之，是要让上传文件按钮和用户指定的按钮重合。 （2）给上传...
实用插件（四）图片上传前预览插件
front_end_fan
08-04 2298
注：该插件app项目，pc项目都可使用1、由于插件为轻量级，直接附上源码和demo<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片上传前预览</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <styl
mui 图片的上传预览
wzx19的博客
08-31 2280
MUI 单个图片上传预览（拍照+系统相册）
layui上传图片并进行图片预览
qq_39577371的博客
07-27 928
上传失败重试');">上传失败更换图片
vue上传图片并预览
weixin_39150852的博客
03-29 1万+
html代码： <div id="headImg"> <div id="myPhoto"> <div class="viewPhoto" @click="monidianji"> <i cl...
vue 图片上传预览/预览
NEWonclick的博客
08-23 1262
【代码】vue 图片上传预览/预览。
图片上传预览及上传后台
人生不止眼前的电脑！
08-14 6293
用纯js实现图片在线预览功能，并增加提交后台代码，实现多个图片多次请求上传，具体使用再进行修改即可，需要引入jquery、layer、ajaxfileupload相关js文件，在非IE浏览器中可以实现点击图片展示大图的功能，IE浏览器下只可以预览，没有绑定点击事件。 一、html代码：<!doctype html> <html> <head> <meta content="text/html; c
jQuery+HTML5实现图片上传前预览效果
04-16
jQuery+HTML5实现图片上传前预览效果，代码简洁，方便使用。
ext图片上传前预览小demo
08-02
EXT上传前先预览一下这个图片
兼容IE和FF的图片上传前预览js代码
10-27
上传前预览使用js实现还是比较cool的，同时还可以兼容IE和FF的能做到这一点已经相当不容易了，下面与大家一起分享下具体的实现，感兴趣的你可不要错过了哈
Nginx+Tomcat负载均衡、动静分离原理
F12138X的博客
06-11 873
十年磨一剑，霜刃未曾试
Java实战项目——基于ssh实现的博客系统（毕业设计）(前后端源码+论文+数据库+说明文档)25.zip
06-15
ava实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），可运行高分资源 Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现的毕业设计&&课程设计（包含运行文档+数据库+前后端代码），Java实现
基于React的后台开发框架（javascript）
06-15
【作品名称】：基于React的后台开发框架（javascript） 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：运行Demo cd tui/example npm install node app.js open localhost:3003/be 说明 simditor文件夹为TUI依赖的编辑器插件，如果用到编辑器，页面引入simditor.all.min.js和simditor.css即可。
吴力群 231123501129.pdf
06-15
吴力群 231123501129.pdf
PC下C语言基于libgraphics和浙江大学simplegui写出的新版吃豆人，仅用于教学和交流.zip
最新发布
06-15
C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中，变量用于存储数据，数据类型用于定义变量的类型和范围。C语言支持多种数据类型，包括基本数据类型（如int、float、char等）和复合数据类型（如结构体、联合等）。 2. 运算符 C语言中常用的运算符包括算术运算符（如+、、、/等）、关系运算符（如==、!=、、=、<、<=等）、逻辑运算符（如&&、||、！等）。此外，还有位运算符（如&、|、^等）和指针运算符（如、等）。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句（如for、while等）和switch语句。通过这些控制结构，可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元，可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型（如int、float等），并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针，可以实现对内存的间接访问和修改。C语言中定义指针使用星号（）符号，指向数组、字符串和结构体等数据结构时，还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构，可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型，通常以字符串常量的形式出现，用双引号（"..."）括起来，末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成，每个成员可以是不同的数据类型；联合由多个变量组成，它们共用同一块内存空间。通过结构体和联合，可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数（如fopen、fclose、fread、fwrite等）实现对文件的读写操作。文件操作函数通常返回文件指针，用于表示打开的文件。通过文件指针，可以进行文件的定位、读写等操作。 总之，C语言是一种功能强大、灵活高效的编程语言，广泛应用于各种领域。掌握C语言的基本语法和数据结构，可以为编程学习和实践打下坚实的基础。
vue图片上传并预览
09-03
在Vue中实现图片上传并预览的过程如下： 首先，要在Vue项目中使用图片上传功能，需要在组件中添加一个文件上传input元素，并设置其类型为"file"，同时在data中定义一个变量来保存上传的文件对象和预览的图片URL。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值