<%@ 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>上传图片，测试</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">
<style type="text/css">
/* 第二种方式 */
#img02
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
};
</style>
<script type="text/javascript">
// 第一种方式
function showImage(){
var fileName=document.getElementById("fname").value;
var showFile=document.getElementById("img1");
showFile.innerHTML="<img src=\"file:\\\\" + fileName + "\" width=\"80\" height=\"60\" />";
}
// 第二种方式
function getValue(im){
im.select();
return document.selection.createRange().text;
}
function showImage02(imgFile){
// var fileName=document.getElementById("fname02");
// var fileValue=getValue(fileName);
var file=getValue(imgFile);
var showFile=document.getElementById("img02");
showFile.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=file;
showFile.style.width=300;
showFile.style.height=200;
}
</script>
</head>
<body>
<h1 style="color:red">第一种方式，测试，失败</h1>
<form action="" enctype="multipart/form-data" method="post">
上传图片:<input type="file" id="fname" onchange="showImage()"/><br>
<img src="images\111.jpg" id="img1" name="img1"/><br>
<input type="submit"/>
</form>
<hr>
<h1 style="color:red">第二种方式，测试,可以</h1>
<form action="" enctype="multipart/form-data" method="post">
上传图片:<input type="file" id="fname02" onchange="showImage02(this)"/><br>
<div id="img02"></div><br>
<input type="submit"/>
</form>
</body>
</html>
分享到：
相关推荐
下面将详细介绍如何在ASP.NET中实现FileUpload控件上传图片前的预览功能，同时兼容IE6、IE7、IE8以及Firefox等主流浏览器。 1. **HTML结构与JavaScript预览** 在前端页面上，我们需要一个FileUpload控件让用户选择...
在JSP上传图片前预览图片在JSP上传图片前预览图片
jquery 上传图片前预览，就只是一个JS文件，使用也简单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head > 图片...
上传图片前 预览效果 html css script
在IT行业中，尤其是在Web开发领域，用户经常需要上传图片，而提供上传图片前的预览功能可以极大地提升用户体验。这个“实现了上传图片前预览效果功能jquery.zip”压缩包文件显然是一个与JavaScript库jQuery相关的...
在IT行业中，尤其是在Web开发领域，用户经常需要上传图片，而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案，就是解决这一问题的一种方法。它允许...
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
JS上传图片前预览（兼容IE7）! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
上传照片并预览，页面点击上传，即可预览上传的图片
在.NET开发环境中，批量上传图片并提供预览和进度条功能是常见的需求，尤其是在构建Web应用时。这个项目提供了一种实现方式，包括源码，可以直接用于开发中。以下是对这个知识点的详细解释： 批量上传图片：批量...
在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...
上传图片"> ``` 这里的`enctype="multipart/form-data"`属性是必须的，因为它允许我们发送二进制数据（如图片）到服务器。 接下来，我们需要在`upload.php`文件中处理上传请求。PHP的`$_FILES`全局数组包含了...
这个"php上传图片并预览源码"示例提供了HTML和PHP两种语言的代码，帮助开发者理解如何实现这一功能。下面我们将深入探讨其中涉及的关键知识点。 1. **表单（HTML）**： HTML页面通常使用`<form>`元素来创建一个...
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
在Java开发中，图片上传、预览、剪切和缩放是常见的功能需求，尤其在Web应用中。这里，我们主要探讨如何实现这些功能，并基于`swfupload`这个库来构建一个完整的解决方案。 首先，`swfupload`是一个古老的Flash上传...
在客户端，用户可以看到所选图片的实时预览，这提升了用户体验，使他们能够在上传前检查图片效果。同时，上传进度也会显示，让用户知道文件传输的状态。 总结来说，实现Bootstrap图片上传和预览功能主要依赖于`...
为了提供更好的用户体验，"上传图片带预览功能"是一项至关重要的特性。它允许用户在实际提交文件之前查看所选图片的效果，确保图片符合预期，减少误操作。这项功能不仅适用于PC端，同时也必须支持手机端，特别是微信...