上傳圖片預覽JS腳本 Input file圖片預覽的實作範例

首頁

web前端

js教程

上傳圖片預覽JS腳本 Input file圖片預覽的實作範例_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:32 PM

上傳圖片預覽

在深圳做專案的時候，需要一個使用者上傳頭像預覽的功能！是在網路上找了很多，都不太滿意。要嘛是flash的，要嘛是Ajax上傳後回傳圖片路徑的，要嘛壓根就是不能用的。幸運的是在這個專案以前有人寫過一個圖片預覽的功能，還被我給翻了出來，在這裡做個記錄，方便自己以後用，也方便其他需要的朋友！

程式碼很簡單，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px'; 
//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 = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
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>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img  src="/static/imghwm/default1.png"  data-src="http://blog.chuangling.net/Public/images/top.jpg"  class="lazy"  id="preview"    style="max-width:90%"  style="max-width:90%" style="display: block; width: 150px; height: 180px;" alt="上傳圖片預覽JS腳本 Input file圖片預覽的實作範例_javascript技巧" ></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>

測試在IE8，FF12.0和Googlechrome 28.0.1500.72都能用!

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Vue中如何实现图片的滚动和缩略图预览？Aug 18, 2023 pm 01:51 PM

Vue中如何实现图片的滚动和缩略图预览？在Vue项目中，我们经常需要展示大量的图片，并希望用户能够方便地浏览和预览这些图片。本文将介绍如何使用Vue组件实现图片的滚动和缩略图预览功能。首先，我们需要安装并引入合适的Vue库，以便于实现图片的滚动和缩略图预览。在本例中，我们将使用vue-awesome-swiper和vue-image-preview两个库来实

抖音评论怎么发图片Feb 19, 2024 pm 01:10 PM

抖音作为全球最受欢迎的短视频分享平台之一，已经吸引了数亿用户加入其中。在观赏他人的精彩作品时，我们经常会被其中的一些动态、有趣或有意义的瞬间所打动。此时，我们不仅可以通过文字评论表达我们的观点和想法，还可以通过图片评论来更加生动地表达我们的情感。那么，在抖音上如何发表图片评论呢？首先，打开抖音APP并进入自己感兴趣的视频。接下来，我们需要根据手机操作系统的不

未来功能抢先用 Safari 技术预览 173 版本释出Jul 02, 2023 pm 01:37 PM

Apple今日释出了Safari技术预览173版本，涵盖部分可能于Safari17推出的功能。该版本适用于macOSSonoma测试版以及macOSVentura系统，有兴趣的用户可于官方网页下载。Safari技术预览173版于设定中新增了功能标志区块，取代原先开发菜单的实验功能。该区块可让开发者快速地搜索特定功能，并以不同形式将「稳定」、「可供测试」、「预览」或「开发人员」等状态标示出来。重新设计的开发菜单可以帮助创作者更容易找到关键工具，以便建立网页、网页应用程序、其他应用程序中的网页内容、

如何在Vue表单处理中实现表单的图片上传与预览Aug 10, 2023 am 11:57 AM

如何在Vue表单处理中实现表单的图片上传与预览引言：在现代Web应用程序中，表单处理是一个非常常见的需求。其中一个常见的需求是，允许用户上传图片并在表单中预览这些图片。Vue.js作为前端框架，为我们提供了丰富的工具和方法来实现这个需求。在本文中，我将向您展示如何在Vue表单处理中实现图片上传和预览的功能。步骤一：定义Vue组件首先，我们需要定义一个Vue组

如何在uniapp中实现图片上传和预览Oct 21, 2023 am 11:48 AM

如何在uniapp中实现图片上传和预览在现代社交网络和电子商务应用中，图片上传和预览功能是非常常见的需求。本文将介绍如何在uniapp中实现图片上传和预览的功能，并给出具体的代码示例。一、图片上传功能的实现在uniapp项目中，首先需要在页面中添加一个图片上传组件，如下所示：<template><view><im

预览打印时不能全部显示出来怎么办Mar 01, 2023 pm 02:45 PM

预览打印时不能全部显示出来的解决办法：1、打开WPS Office表格，点击工作栏区左上角的“打印预览”；2、进入打印预览页面，点击“缩放比例”；3、在出现的下拉列表中选择适用的比例，选择“横向”或者“纵向”即可。

解决win11预览体验计划的报错问题Jan 14, 2024 pm 05:33 PM

我们可以在windows系统的预览体验计划中，更新升级windows11系统，但是很多朋友遇到了在加入预览体验计划时出现错误代码0x0的情况，这是因为我们的系统缺少了部分注册表，大家可以重新导出以解决，下面就一起来看一下吧。win11预览体验计划报错怎么办方法一：1、如果我们的系统并不是最新版的系统，可以尝试在系统更新中更新一下。方法二：1、报错还可能是注册表的问题，我们可以尝试使用注册表修复工具进行修复。方法三：1、直接在本站下载win11系统进行安装。2、下载完成后根据本站提供的教程安装就可

如何通过Vue实现图片的上传和预览？Aug 19, 2023 pm 09:25 PM

如何通过Vue实现图片的上传和预览？概述:在现代web应用程序中，图片的上传和预览是一项常见的需求。Vue作为一种流行的JavaScript框架，提供了便捷的方式来实现这一功能。本文将介绍如何使用Vue来实现图片的上传和预览，包括前端界面的设计以及后台接口的处理。前端界面设计:首先，我们需要设计一个前端界面来选择并上传图片。在Vue中，我们可以使用<i

See all articles