<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function yulan()
{
var fileext=document.form1.UpFile.value.substring(document.form1.UpFile.value.lastIndexOf("."),document.form1.UpFile.value.length);
fileext=fileext.toLowerCase();
if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.jpeg')&&(fileext!='.png')&&(fileext!='.bmp'))
{
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
document.form1.UpFile.focus();
}
else
{
//alert(''+document.form1.UpFile.value);
document.getElementById("preview").innerHTML="图片预览区<img src='"+document.form1.UpFile.value+"' style='border:6px double #ccc';padding:5px;>"
}
}
</script>
<style>
#preview{
border: 1px dashed #F00;
width:200px;
height:200px
}
</style>
</HEAD>
<BODY>
上传图片前御览
<form name="form1" method="POST" enctype="multipart/form-data">
<input type="file" name="UpFile" size="46" onchange="yulan()">
<div id="preview">图片预览区</div>
</form>
</BODY>
</HTML>
分享到:
相关推荐
js 图片上传 并预览图片
代码片段: *{ margin:0;padding:0; } html,body{ font-family:Arial,Helvetica,sans-serif; } li{ list-style: none; } img{ border:none;display: block } .box{ width: 1024px;margin: 50px ...
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css...
上传图片的project 博文链接:https://alisdame.iteye.com/blog/2163940
js源代码写的多图片上传预览,用于多个图片上传前的预览
图片上传,html页面,本地预览,后台前台页面代码都有
插件描述:js上传图片本地预览。 参考实例:http://www.jq22.com/jquery-info6180
该代码能够实现图片上传预览效果,并且能够跨多个浏览器。兼容性好......
原生JS简单图片上传预览代码基于jQuery.1.10.2.js制作,选取图片上传,缩略图显示效果。
HTML5图片压缩上传预览效果代码,减少图片占用服务器硬盘空间,可压缩前预览和压缩后预览。
完整的图片上传裁剪预览功能,通过uploadify+imgareaselect这两个插件实现;前后台代码(html+java)详细,所需的js和jar包均在里面,
js代码实现的图片上传预览插件
NULL 博文链接:https://sumlog.iteye.com/blog/557568
找了很多资料,整理了一下,原理大概分为两部分:一个是前台用JavaScript对图片进行定位预览,JavaScript并不能对图片进行剪裁,所以第二步是需要把图片及其预览结果传递给JAVA进行剪裁。这里提供了前台的图片预览和...
JS+asp.net 图片上传源代码 支持多上传 上传前预览 记着回复。。凡属还会加1哦。 支持各种浏览器。。。99%全部支持
js实现上传图片功能 前端上传图片的原理是:运用input type=“file”的标签获取图片,再使用FileReader这个对象 new 一个实例,通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式,完成...
weui框架暂时只有css文件,并没有js文件实现其功能,我在其html+css后面增加了js实现其功能,为大家提供方便,也为自己保存记录。具体实例代码大家参考下本
代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法...
java头像设置代码例子,简单容易学习,适合初学的你,使用的是原生js编写