图片上传预览,兼容IE6,IE8


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

$(".file").change(function(){

var fileImg = $(".fileImg");

var explorer = navigator.userAgent;

var imgSrc = $(this)[0].value;

if (explorer.indexOf(‘MSIE‘) >= 0) {

if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {

imgSrc = "";

fileImg.attr("src","/img/default.png");

return false;

}else{

fileImg.attr("src",imgSrc);

}

}else{

if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {

imgSrc = "";

fileImg.attr("src","/img/default.png");

return false;

}else{

var file = $(this)[0].files[0];

var url = URL.createObjectURL(file);

fileImg.attr("src",url);

}

}

})

})

</script>

</head>

<body>

<form enctype="multipart/form-date" method="post">

<input type="file">

<input type="submit">

</form>

<img src="">

</body>

</html>

时间: 2024-08-03 22:15:07

图片上传预览,兼容IE6,IE8的相关文章

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

图片上传-预览

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript实现图片上传本地预览图片的代码-php自学网</title> <script type="text/javascript"> function checkFiles(str, ex

来之不易的js图片上传预览代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

Javascript之图片上传预览

使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来生成本地图片预览图的. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <

js:s上次预览,上传图片预览,图片上传预览

<!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-

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于

多图片上传预览功能

//下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("dd"); dd.innerHTML = ""; var fileList = docObj.files; for (var i = 0; i < fileList.length;

移动端图片上传预览

前天要做wap版的图片上传预览,找了好半天才找到比较适合的插件,我在该插件的基础上修改了一些东西,比如:上传后的图片删除后不能再添加.不能限制上传图片的数量. input虽然有multiple(多选),但是android目前是不支持的. 该插件控制不了不能上传同一张图片,暂时没有思路解决这个问题(:′д`)ゞ 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset=&