用JS实现不同浏览器的图片预览功能_js怎么唤起手机浏览器预览图片-优快云博客

本文链接：https://blog.youkuaiyun.com/jamesge2010/article/details/52766110

本文介绍了一个使用JSP实现的简单文件上传页面，包括文件选择、预览及上传功能。页面通过JavaScript实现了文件预览效果，并利用Java后端处理文件上传请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body onload="check()">
<form action="upload" method="post" encType="multipart/form-data">
请选择上传的文件：<input id="file" type="file" name="file" onchange="changed(this)">
<input type="submit" value="确定">
<br>
<img src="" id="img" width="30%" height="50%" border="0">
</form>

<input id="check" type="hidden" value="${result}">

<a href="query">文件列表</a>

</body>

<script type="text/javascript">
function check() {
var result = document.getElementById("check").value;
if(result != "") {
if(result == "success") {
alert("上传成功！");
}
}
}

function changed(obj) {
//var path = document.getElementById("file").value;
//document.getElementById("img").src = path;
// alert(obj.value);

//alert(window.createObjectURL);
//alert(window.URL);
//alert(window.webkitURL);
var objUrl;

if (window.navigator.userAgent.indexOf("MSIE") >= 1 && window.URL == undefined) {
objUrl = getObjectURL(obj);
} else {
objUrl = getObjectURL(obj.files[0]);
if (objUrl) {
// alert(objUrl);
document.getElementById("img").src = objUrl;
}
}

//alert(objUrl);
// console.log("objUrl = "+objUrl);
}

//建立一個可存取到该file的url
function getObjectURL(file) {

//var url = null ;
var url;
//alert(window.createObjectURL);
//alert(window.URL);
//alert(window.webkitURL);
//alert(window.navigator.userAgent.indexOf("MSIE"));
if (window.navigator.userAgent.indexOf("MSIE") >= 1 && window.URL == undefined) { // basic
// url = window.createObjectURL(file) ;
alert("IE6-9!");

url = document.getElementById("img");
file.select();
file.blur();
url.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
url.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection
.createRange().text;
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</html>