方法1、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>get file input full path</title>
<script language='javascript'>
function getFullPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" onchange="document.getElementById('img').src=getFullPath(this);" />
<img id="img"width="230" height="210" />
</body>
</html>
方法2、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最近项目中用到的图片上传前预览功能，兼容IE6-9，FF
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "300px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
相关推荐
在图片上传中，JS通常用于处理用户选择文件后在本地预览图片，验证文件类型和大小，以及提供一个友好的用户体验，如进度条显示上传进度。 1. **图片预览**：使用HTML5的FileReader API，开发者可以读取用户选择的...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤，理解并掌握这些知识点，可以构建出稳定且用户体验良好的图片上传预览功能。
在PHP开发中，图片上传和预览功能是常见的需求，特别是在构建网站或Web应用程序时。这一功能允许用户上传他们的图片，并在提交前...总之，PHP的图片上传和预览功能是一个实用且重要的技术，它能够极大地提升用户体验。
在JavaScript代码中，我们可以通过 `sender.files[0]` 获取选择的文件对象，并通过 `getAsDataURL()` 方法将其转换为DataURL形式，以便在浏览器中预览图片。 2. 图片预览实现 在CSS中，我们定义了三个对象：`#...
Bootstrap图片上传和预览是网页开发中的一个常见功能，它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架，提供了一系列组件和工具，使得开发者能够快速构建响应式、移动设备优先的...
4. **预览图片**：`FileReader`的`onload`事件回调中，将`data URL`设置到`<img>`标签的`src`属性，实现图片预览。 5. **服务器交互**：如果需要服务器端生成预览图，可以使用`XMLHttpRequest`或`fetch`发送图片...
js实现图片上传预览功能，自己稍微加工了一下，这个在IE9上面挺有意思的，alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30，第二次之后就会显示图片的实际大小，具体原理不懂，有明白的...
在.NET开发环境中，批量上传图片并提供预览和进度条功能是常见的需求，尤其是在构建Web应用时。这个项目提供了一种实现方式，包括源码，可以直接用于开发中。以下是对这个知识点的详细解释： 批量上传图片：批量...
综上所述，这个纯JS实现的图片上传预览插件利用了HTML5的File API和FileReader API，结合原生JavaScript的DOM操作和事件监听，实现了用户友好的图片预览功能。开发者可以根据实际需求进行定制，比如增加图片裁剪、...
将读取到的DataURL设置到`<img>`标签的`src`属性，就可以在页面上预览图片了。通常我们会创建一个隐藏的`<img>`元素或者使用CSS来实现预览效果，比如设置`max-width: 100%`和`max-height: 100%`，确保图片不会超出...
1. **HTML结构**：在页面中，我们需要一个`<input type="file">`元素让用户选择图片，以及一个`<img>`元素用于显示预览图片。 2. **jQuery事件监听**：使用`$(document).ready()`确保DOM加载完成后，我们可以绑定`...
- **viewthread.js**和**ajax_navagation.js**：这两个JavaScript文件可能包含了处理用户交互、AJAX请求等功能，如图片的预览和上传过程。 5. **目录结构**： - **upload**目录：可能用于存放待上传或已上传的...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...
- **CSS样式**：为了美观和用户体验，可以添加CSS样式调整预览图片的大小、位置等。 2. **后端处理**： - **接收文件**：在.NET后端，我们通常使用`HttpPostedFileBase`类来接收上传的文件。用户提交表单时，后端...
在IT领域，图片上传及预览以及时间水印是常见的功能需求，特别是在Web应用和移动应用中。这个压缩包文件“photosupload”很可能是提供了一套解决方案，让我们详细了解一下这两个核心知识点。 首先，图片上传是网页...
本篇将详细介绍如何在`.NET MVC`框架下，结合`HTML`、`JavaScript`（简称Js）和`jQuery`（简称JQ）实现"上传图片预览"功能，并限制上传的图片格式和大小。 首先，我们需要在前端页面创建一个`HTML`表单，包含一个`...
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
这款插件无需额外安装任何组件，简化了图片上传流程，同时提供了JavaScript（JS）预览功能，让用户体验更佳。 首先，我们要理解什么是“无组件图片上传”。在传统的图片上传过程中，通常会依赖Flash、Silverlight等...
在Java开发中，图片上传、预览、剪切和缩放是常见的功能需求，尤其在Web应用中。这里，我们主要探讨如何实现这些功能，并基于`swfupload`这个库来构建一个完整的解决方案。 首先，`swfupload`是一个古老的Flash上传...
`readAsDataURL`方法将文件内容转化为Data URL，然后在`onload`事件回调中，将这个URL设置为图片元素的`src`属性，从而实现在页面上预览图片。 此外，还可以添加额外的功能，比如限制上传文件的大小和类型，或者...