js实现上传图片预览的方法
作者:bea
本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下: 代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filextens
本文实例讲述了js实现上传图片预览的方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML=""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + path + "")";//使用滤镜效果 } else//FF { path = imgFile.files[0].getAsDataURL(); document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>"; // document.getElementById("img1").src = path; } } }
调用:
代码如下:
上传图片: <input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;"> </div>
运行效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
代码如下:
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML=""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + path + "")";//使用滤镜效果 } else//FF { path = imgFile.files[0].getAsDataURL(); document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>"; // document.getElementById("img1").src = path; } } }
调用:
代码如下:
上传图片: <input type="file" name="file"
style="width: 200px; height: 20px;" onchange="PreviewImage(this)" id="upload" />
<div id="imgPreview" style="width:120px; height:100px;margin-left: 280px;"> </div>
运行效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery前端分页示例分享
- js进行表单验证实例分析
- EasyUi datagrid 实现表格分页
- Node.js node-schedule定时任务隔多少分钟执行一次的方法
- Node.js抓取中文网页乱码问题和解决方法
- JS数组的常见用法实例
- bootstrap table 服务器端分页例子分享
- js实现对table动态添加、删除和更新的方法
- js+css实现导航效果实例
- jquery.mobile 共同布局遇到的问题小结
- jquery中EasyUI使用技巧小结
- javascript操作符"!~"详解
- JavaScript中的标签语句用法分析
- jquery动态添加删除(tr/td)
- javascript模拟map输出与去除重复项的方法
- JavaScript设置body高度为浏览器高度的方法
- jquery动态改变div宽度和高度
- angularJS结合canvas画图例子
- jquery实现上下左右滑动的方法