带预览和删除的图像上传
use*_*468 3 javascript upload jquery
有关于以下脚本的跟随问题和需要答案,这些脚本将在上传之前预览照片.该脚本来自http://jsbin.com/uboqu3/edit#javascript,html
1)该脚本适用于Firefox,对IE没有好处.如何让它适用于IE？
2)没有删除照片的方法.需要像预览照片上安装的小图像"X",单击此"X"将删除照片.谁能提供这个解决方案？
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
在几个浏览器上测试过,Chrome,Fx,Safari 6(有人可以测试5个吗？)
适用于我的IE8上的IE8而没有任何设置更改,但是@Gunasekaran稍后会在本页提到您可能需要
打开工具 - > Internet选项 - >安全选项卡 - >自定义级别 - "将文件上传到服务器时包含本地目录路径"找到设置,然后单击启用.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#img_prev').attr('src',img).height(200);
}
$("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
$("#x").click(function() {
$("#img_prev").attr("src",blank);
$("#x").hide();
});
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>
在IE8上的IE8中看起来像这样:
一个较新的方法是createObjectURL,我还没有实现
更新您将需要添加一个onclick清除文件的输入,如果你想允许用户选择两次相同的图像(平变化不会那么触发)
- 对不起,您的解决方案不起作用.在IE8上测试它,它没有用. (2认同)
这不适用于 Internet Explorer 10 以外的任何版本...FileReader()直到 IE10 才引入支持...它将适用于 Chrome 7 和 Firefox 3.6
请参阅此处的文档以获取 FileReader或caniuse.com的支持
| 归档时间： |
|
| 查看次数： |
23068 次 |
| 最近记录： |