完整的图片上传浏览:
<body>
<input type="hidden" name="hosp.image_id" id="image_id"/>
<div id="hosp_image" style="width: 100px; height: 100px" ></div>
<input type="file" name="file" id="upload_image" onchange="uploadImg(this)" />
<a href="javascript:orgClearImg()">删除</a>
</body>
<script type="text/javascript">
function uploadImg(imgFile){
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
if (imgFile.files && imgFile.files[0]) { // ie下用h5的FileReader
var reader = new FileReader();
reader.onload = function(evt){
showThumb(evt.target.result);
}
reader.readAsDataURL(imgFile.files[0]);
}else{//如果不支持就用滤镜
var imgDiv = document.getElementById("hosp_image");
imgDiv.innerHTML = "";
imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
}
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById('upload_image').files.item(0));
showThumb(url);
imageSrcUrl = url;
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById('upload_image').files.item(0));
showThumb(url);
imageSrcUrl = url;
}
}
//显示图片
function showThumb(url){
var str = '<img width="100" height="100" onclick="showSrcImg()" alt="" src="'+url+'" />';
document.getElementById('hosp_image').innerHTML = str;
}
//放大显示图片
function showSrcImg(){
var str = '<img alt="" src="'+imageSrcUrl+'" />';
document.getElementById('div_src_image').innerHTML = str;
$('#imageSrcDialog').dialog('open');
}
//清空图片
function orgClearImg(){
$('#upload_image').val('');
$('#hosp_image').html('');
$('#image_id').val('');
//ie
var imgDiv = document.getElementById("hosp_image");
imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = false)";
var obj = document.getElementById('upload_image') ;
obj.outerHTML=obj.outerHTML;
}
</script>
在ie10 和ie8 下,有时会报filters不能用。所以考虑先用h5的filterReader,再考虑滤镜。