图片预览：
上传图片时的预览实现，支持各浏览器。
原理比较简单，下面是简单的代码实现：
<!--
Created by IntelliJ IDEA.
User: 张国明 guomingzhang2008@gmail.com
Date: 12-11-26
Time: 15:08:36
个人头像上传
-->
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>本地图片预览</title>
<head>
<script src="jquery1.7.min.js"></script>
<script type="text/javascript">
/**
* 本地预览
* @param inputFile 读入的文件对象
*/
function readURL(inputFile) {
var Browser_Name = navigator.appName;
var is_IE = (Browser_Name == "Microsoft Internet Explorer");//判读是否为ie浏览器
if (is_IE) {
// IE浏览器 直接获取文件的路径值
$("#preViewImg").attr("src", "file:///" + $("#file").val());
} else {
// 非IE浏览器 使用HTML5的方式获取文件浏览框中的文件
if (inputFile.files && inputFile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preViewImg').attr('src', e.target.result);
};
reader.readAsDataURL(inputFile.files[0]);
}
}
}
/**
* 上传时的验证
*/
function uploadValidate() {
if ($('#file').val() == "") {
alert("请选择您要上传的图片！");
return;
}
//校验文件格式
if(!/^.*?\.(jpg|JPG)$/.test($("#file").val().toLowerCase())){
alert("只能上传jpg、JPG格式的文件！");
return;
}
alert("提交成功");
}
</script>
</head>
<body>
<div style="margin-left: 80px; width: 100px; height: 123px; padding: 2px; background-color: #dfdfdf; border: 1px solid #f0f0f0;">
<!-- 预览图片，这里将图片的大小设置成固定的了。 -->
<img id="preViewImg" width="99" height="122" src="no_pic.png">
</div>
<div style="margin-left: 70px; font-size: 12px;">(建议尺寸 100 * 120)</div>
<form id="editForm" method="post" action="" enctype="multipart/form-data">
<input id="file" type="file" name="file" onchange="readURL(this);"/>
<input type="button" value="上传" onclick="uploadValidate();">
</form>
</body>
</html>
分享到：
相关推荐
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
使用 jQuery插件实现简单的图片预览功能
基于Jquery实现的图片预览插件，支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览，下载后即可快速使用。
使用canvas实现的，前端图片预览插件，提供基本的放大、缩小、移动、旋转、翻转功能，由于JS加载图片的原因，双击直接运行访问不到图片，需将代码部署在服务器中才可。
可做图片预览跟淘宝图片预览功能一样，新窗口全屏图片展示功能
tinymce新增的本地图片预览功能，具体实现依靠jquery和ajax，代码并不复杂
jQuery图片预览，内有单张图片预览，多张图片预览，json数据时的预览
input file上传图片预览
图片预览 可以放大，缩小图片
viewer.js是一款很实用很简单的图片预览插件，可以轻松实现页面内点击图片后的预览时间，并且能对图片进行放大缩小，这里是我写的一个demo，供大家参考。
C#上传图片预览，aspx，winform，都有。。
点击查看图片预览，支持多图片预约，可左右切换查看，兼容PC、移动端
FCKeditor 2.6 浏览服务器 图片预览 FCKeditor 2.6 浏览服务器 图片预览 FCKeditor 2.6 浏览服务器 图片预览 FCKeditor 2.6 浏览服务器 图片预览 FCKeditor 2.6 浏览服务器 图片预览
图片预览插件 viewer
实现仿Windows7图片预览窗格效果
Jsp图片预览程序（含Java源码） 目前，很多网站都在为提升用户体验而努力，想尽多种办法让用户在网站上的操作更加舒适、人性化，就像这个图片预览小功能一样，不要说它很小，但是它发挥的作用很明显，在上传前预览...
移动端Vue.js图片预览插件 | Mobile-friendly picture file preview Vue.js plugin with horizontal nav and bottom title.
这是一个用于做图片预览或者图片查看得react插件
用于winform的图片上传下载,带图片预览,源码项目
jquery做的立即图片预览功能