本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下:

下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload

对于现代浏览器来说,要实现图片预览非常简单:

1、fileReader.readAsDataURL(file)

2、window.URL.createObjectURL(file)

以上两种方法分别可以得到一个base64和一个blob对象的URL地址,从而实现预览。但是,他们只支持在IE10+,显然这是不够的,如何实现低版本IE浏览器的图片预览呢?代码如下:

<html http://www.w3.org/1999/xhtml" data-cke-saved-href="http://www.w3.org/1999/xhtml" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" language="javascript">

$('#preview_fake').change(function () {

previewImg($(this), $('#preview'));

});

function previewImg($inputId, $previewId) {

var inputId = $inputId[0],

previewId = $previewId[0];

$previewId.empty();

if(/msie/.test(navigator.userAgent.toLowerCase())){

if($.support.version == 6.0){

$previewId.attr("src",inputId.value);

}else{

inputId.select();

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

previewId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale',src="" + reallocalpath + """")"";

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注