js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

fushanlang — Mon, 17 Dec 2012 08:28:34 +0000

上面由于代码显示控件去除了html header标签，可以参照以下完整的内容:

<pre> <!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" /> <style type="text/css"> #preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; } </style> <script type="text/javascript"> function previewImage(file) { var MAXWIDTH = 300; var MAXHEIGHT = 300; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML = ''; 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 { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; var objPreviewSizeFake = document.getElementById('preview_size_fake'); objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; div.innerHTML = ''; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.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;margin-left:"+rect.left+"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> </head> <body> <div id="preview"> </div> <div style="width:1px;height:1px;overflow: hidden;"> </div> <br/> <input type="file" onchange="previewImage(this)" /> </body> </html></pre> <p>

jquery Masonry瀑布流插件(转)

fushanlang — Tue, 07 Aug 2012 04:03:15 +0000

如果你经常网上冲浪，这样参差不齐的多栏布局，就象砖块效果砌墙一样，错落有致，是不是很眼熟啊？

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，

让你的网页看上去更加的整齐、漂亮！

官网插件下载地址以及详解地址：

示例demo及文档说明：http://masonry.desandro.com/ （本站离线版下载）

你也可以下载打包的html文档在本地查阅：（内含jquery.masonry.min.js 和 jquery.masonry.js 和实例）
Viewing this project locally
Via download

You can download a zip of all the flat HTML files from http://meta.metafizzy.co/files/masonry-site.zip. 本站下载

代码下载地址： https://github.com/desandro/masonry/downloads 本站下载（里面的demo都有问题，建议还是看上面的官方demo或者本站提供的离线版）

以下是官网的实例截图：

从这2张图片中就能看到此插件的作用了把！

更鲜明的例子，chinaz.com的素材列表页也用了这个jQuery Masonry 插件

chinaz.com截图：

该如何使用呢，其实很简单，看下代码：

test1

test2

test3

test4

使用说明：

配置Masonry相当容易，只需要在jQuery脚本中的wrapping container元素中加上.masonry()方法。

multiple widths:

$(‘#wrapper’).masonry({ columnWidth: 200 });

same width

$(‘#wrapper’).masonry({ singleMode: true });

$(‘#wrapper’).masonry({

singleMode: false,
// 禁用测量每个浮动元素的宽度。
// 如果浮动元素具有相同的宽度，设置为true。
// 默认： false

columnWidth: 240,
// 1列网格的宽度，单位为像素（px）。
// 默认：第一个浮动元素外宽度。

itemSelector: ‘.box:visible’,
// 附加选择器，用来指定哪些元素包裹的元素会重新排列。

resizeable: true,
// 绑定一个 Masonry 访问用来窗口 resize时布局平滑流动.
// 默认：true

animate: true,
// 布局重排动画。
// 默认：false

animationOptions: {},
// 一对动画选项，具体参数可以参考jquery .animate()中的options选项

appendedContent: $(‘.new_content’),
// 附加选择器元素，用来尾部追加内容。
// 在集成infinitescroll插件的情况下使用。

saveOptions: true,
// 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
// 默认：true

}, function() {}
// 可选择的回调函数
// ‘this’将指向重排的Masonry适用元素
);

BUG：

发现在container窗口的高度计算上，IE与firefox会出现偏差，有可能IE的计算高度比FF的大几十个像素，

图片瀑布流的简单做法：

这里只说说等宽的图片瀑布流，因为等宽的做出来的效果个人觉得比较好看，

关键是：img的设置，width:100%, 占满整个DIV层，高度height不设置，这样就可以实现了图片能根据宽度等比例缩放，不变形，

而考虑到如果没有这个JS插件失效的情况也能够正常显示，所以给每个box都添加了float:left;浮动和边距

这里的box宽度可以根据container的宽度除以你想一行出现的图片数得到估算值。

图片高度BUG修正：

由于网络传输的速度问题，当浏览器加载了dom，但是img图片还没有加载完毕，这个插件在计算图片高度和定位的时候，就会出错，在firefox和chrome中最为明显，尤其是google chrome.
原因：
在chrome浏览器下测试，在图片加载过程中，img的宽度和高度均为0，而在IE下，则浏览器先给img设定了宽度和高度，所以这个插件在IE下使用正常，但在chrome会出错。而这个插件看了官方的image demo也是如此，box层并没有动态生成一个高度值把布局撑开。

解决办法就是先让所有的图片加载完毕，才执行一次masonry()方法。

代码如下：

或者使用它自带的方法imagesLoaded，http://masonry.desandro.com/demos/images.html

var $container = $(‘#container’);

$container.imagesLoaded( function(){
$container.masonry({
itemSelector : ‘.box’
});
});

当然了，这样子的话，在加载图片的时候，你会先看到图片简单的排列而已，没有砖块瀑布流的效果，只有当所有图片加载完成后才会出现砖块效果。所以，至于以上代码加不加，就要考虑你的网站的访问速度了！

浮山狼de博客 » js

js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

jquery Masonry瀑布流插件(转)