有点小揪心,IE和chrome上预浏览图片问题。
function display(x){
document.getElementById('p').style.display = x;
}
function pric(){
var p = document.getElementById('file');
p.click();
document.getElementById('img').src = p.value;
}
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
<div class="c">
<input style="display:none;" id="file" type="file" />
<img id="img" width="100" height="100" />
</div>
<div class="b">
<a href="#" onclick="display('none')">上传</a>
<a href="#" onclick="pric()">预览</a>
</div>
</div>
</div>
</center>
<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
function PreviewImage() {
oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>
<script>
//使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]-->');
// var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
function change(file,pic) {
if(window.FileReader){//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
oFReader = new FileReader();
oFReader.readAsDataURL(file.files[0]);
oFReader.onload = function (oFREvent) {pic.src = oFREvent.target.result;};
}
else if (document.all) {//IE8-
file.select();
var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';//设置img的src为base64编码的透明图片,要不会显示红xx
}
}
else if (file.files) {//firefox6-
if (file.files.item(0)) {
url = file.files.item(0).getAsDataURL();
pic.src = url;
}
}
}
function display(x) {
document.getElementById('p').style.display = x;
}
</script>
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
<div class="c">
<img id="img" width="100" height="100" />
</div>
<div class="b">
<a href="#" onclick="display('none')">上传</a>
<a href="#" style="position:relative"><input onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>
</div>
</div>
</div>
</center>
我这个IE9
显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
你用我发的那个代码测试下 好像从ie8开始就不能预览本地图片了吧? 我这个IE9
显示本地图片?那你的所谓ie显示应该也是ie的低版本吧?浏览器安全性提高以后,不允许显示本地图片了,所以要么是flash,或者sl。。。
java就不懂了啵。。看提示应该是保存文件的位置不允许写入,没写入权限。。
用我上面的代码,虽然不能显示,但是可以写进去的。 换成你这个就不行了,
<html>
<head>
<title>Ajax File Uploader Plugin For Jquery</title>
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<img id="loading" src="loading.gif" style="display:none;">
<script>
//使用IE条件注释来判断是否IE6,通过判断userAgent不一定准确
if (document.all) document.write('<!--[if lte IE 6]><script type="text/javascript">window.ie6= true<\/script><![endif]-->');
// var ie6 = /msie 6/i.test(navigator.userAgent);//不推荐,有些系统的ie6 userAgent会是IE7或者IE8
function change(file, pic) {
if (window.FileReader) {//chrome,firefox7+,opera,IE10,IE9,IE9也可以用滤镜来实现
oFReader = new FileReader();
oFReader.readAsDataURL(file.files[0]);
oFReader.onload = function (oFREvent) { pic.src = oFREvent.target.result; };
}
else if (document.all) {//IE8-
file.select();
var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
if (window.ie6) pic.src = reallocalpath; //IE6浏览器设置img的src为本地路径可以直接显示图片
else { //非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现,IE10浏览器不支持滤镜,需要用FileReader来实现,所以注意判断FileReader先
pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; //设置img的src为base64编码的透明图片,要不会显示红xx
}
}
else if (file.files) {//firefox6-
if (file.files.item(0)) {
url = file.files.item(0).getAsDataURL();
pic.src = url;
}
}
}
function display(x) {
document.getElementById('p').style.display = x;
}
function ajaxFileUpload() {
$("#loading").ajaxStart(function () { $(this).show(); }).ajaxComplete(function () { $(this).hide(); });
alert('ready')
$.ajaxFileUpload({
url: 'save.ashx',
secureuri: false,
fileElementId: 'file',
dataType: 'json',
data: { name: 'logan', id: 'id' },
success: function (data, status) {
if (data.success) alert('上传成功,返回的文件名:' + data.msg); else alert('错误:' + data.msg);
},
error: function (data, status, e) {
alert(e);
}
})
alert('send')
return false;
}
</script>
<a href="javascript:;" onclick="display('block')">修改头像</a>
<center>
<div class="lk" id="p" style="display:none">
<div id="d">
<div class="c">
<img id="img" width="100" height="100" />
</div>
<div class="b">
<a href="#" onclick="ajaxFileUpload()">上传</a>
<a href="#" style="position:relative"><input onchange="change(this, document.getElementById('img'))" size="0" style="width:30px;cursor:pointer;opacity:0;filter:alpha(opacity=0);position:absolute;left:0px;top:0px;" id="file" type="file" />预览</a>
</div>
</div>
</div>
</center>
</div>
</body>
</html>