js上传图片预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".file").change(function(){
var fileImg = $(".fileImg");
var explorer = navigator.userAgent;
var imgSrc = $(this)[0].value;
if (explorer.indexOf('MSIE') >= 0) {
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
imgSrc = "";
fileImg.attr("src","/img/default.png");
return false;
}else{
fileImg.attr("src",imgSrc);
}
}else{
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
imgSrc = "";
fileImg.attr("src","/img/default.png");
return false;
}else{
var file = $(this)[0].files[0];
var url = URL.createObjectURL(file);
fileImg.attr("src",url);
}
}
})
})
</script>
</head>
<body>
<form enctype="multipart/form-date" method="post">
<input type="file" class="file">
<input type="submit" class="sub">
</form>
<img src="" class="fileImg">
</body>
</html>
分享到：
相关推荐
"JS上传图片预览技术" 在Web开发中，上传图片预览...JS上传图片预览技术是通过 HTML、CSS 和 JavaScript 实现的，该技术可以跨浏览器实现图片上传预览功能，並且能够自动调整图片的尺寸以适应不同的浏览器和屏幕尺寸。
在网页开发中，JS上传图片预览功能是一个常见的需求，尤其在用户需要在提交之前查看即将上传图片的效果时。这个功能允许用户在正式上传图片到服务器之前，在客户端就能看到图片的预览效果，提升了用户体验。本文将...
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
总的来说，实现JavaScript上传图片预览效果需要结合HTML、CSS和JavaScript，利用File API读取文件，并通过`<img>`标签显示预览。在旧版浏览器中，可能需要依赖额外的库或技术来达到兼容性。这些文件名表明了实现这一...
"VS2010+js 上传图片预览并保存"是一个典型的Web开发案例，它结合了Visual Studio 2010（VS2010）作为开发环境，JavaScript作为客户端脚本语言，以及Ajax技术实现异步上传，提供用户体验。在这个项目中，我们重点...
在网页开发中，JS上传图片预览功能是一个常见的需求，特别是在用户需要在提交前查看上传图片效果的情况下。这个小DEMO提供了一种解决方案，适用于多种浏览器环境，包括IE6到9、Firefox、Chrome17+、Opera11+以及...
这个"JavaScript 上传图片预览效果.zip"文件可能包含了一个演示如何在用户选择图片后即时显示预览的示例代码。通常，这种预览功能是通过HTML5的File API来实现的，它允许我们在用户选择文件后直接在浏览器中处理本地...
`ImagePreviewd.js`和`CJL.0.1.min.js`是JavaScript库，可能包含了图片预览的核心功能。`ImagePreviewd.js`很可能是专门处理图片预览逻辑的脚本，而`CJL.0.1.min.js`可能是一个第三方库，如压缩库或DOM操作库，为`...
综上所述，这个纯JS实现的图片上传预览插件利用了HTML5的File API和FileReader API，结合原生JavaScript的DOM操作和事件监听，实现了用户友好的图片预览功能。开发者可以根据实际需求进行定制，比如增加图片裁剪、...
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
6. **Ajax异步上传**：图片预览后，通常会使用Ajax异步上传到服务器。可以使用`XMLHttpRequest`或更现代的`fetch` API来发送POST请求，将图片的DataURL作为请求体的一部分。需要注意的是，DataURL可能会非常大，因此...
最近也经常遇到浏览器兼容的问题，昨天遇到上传图片预览问题，发现IE8和火狐不能显示，弄了很久，早上终于解决了很高兴。故跟大家分享下，我也多是网上找的，自己总结的一下，希望对大家有点帮助。 我们一般根据IE6...