<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+"' width=120 style='border:6px double #ccc'>"
}
}
</script>
<form name="form1" method="POST" enctype="multipart/form-data">
<input type="file" name="UpFile" size="46" onchange="yulan()">
<div id="preview"></div>
</form>
效果:
来自:
http://www.alixixi.com/Dev/HTML/jsrun/pic/2008/2008080480470.html
- 大小: 10.1 KB
分享到:
相关推荐
在IT行业中,"上传图片有预览特效"这个主题涉及到前端开发中的图像处理与用户体验设计。用户在上传图片时能够预览图片效果,这不仅提高了交互性,也使得用户能够直观地确认上传的图片是否符合预期。以下是关于这一...
这个特效支持用户一次性选择多张图片进行上传,并且在上传之前可以实时预览图片效果,增加了用户体验。同时,它还具备一些额外的控制功能,如限制可上传的图片数量、设置图片的尺寸限制以及提供删除已选图片的选项。...
本文将深入探讨“jQuery上传图片预览插件”,这是一个实用的工具,旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能,尤其在处理图片大小调整和等比例缩放方面表现卓越,同时兼容...
这个功能对于Web应用程序非常有用,特别是那些涉及用户上传图片的网站,如社交媒体、电商平台或个人博客。现在,我们将深入探讨这个主题。 首先,jQuery的图片上传预览功能主要通过HTML5的File API来实现。File API...
5. **图片预览**:在图片上传之前预览图片,可以提高用户体验,让用户在上传前就能看到所选图片的效果。这通常通过FileReader API的`readAsDataURL`方法读取文件内容,然后将结果设置为`<img>`标签的`src`属性实现。...
这个“HTML5图片压缩上传预览效果代码”压缩包正是利用了这些特性,帮助用户在上传图片前进行压缩,降低图片大小,从而节省服务器存储空间,并提供压缩前后的预览功能。下面我们将详细探讨相关的HTML5技术以及实现这...
这个插件能够帮助开发者轻松地在网站上添加多图片选择和预览功能,提升用户体验,尤其适用于摄影平台、电商网站或任何需要用户上传图片的场景。 在jQuery中,此插件可能使用了HTML5的File API来处理文件读取和预览...
在图片上传场景中,jQuery可以简化文件选择、文件读取和图片预览等过程。 二、多图片上传 在传统的HTML表单中,一次只能选择一个文件进行上传,但通过HTML5的File API,我们可以实现多选文件的功能。jQuery插件...
在图片上传预览功能中,jQuery扮演着核心角色,通过其强大的API,我们可以轻松地获取到用户选择的文件,并实时显示预览效果。 该代码实现的核心在于利用HTML5的FileReader API,这个API允许我们在浏览器端读取文件...
总的来说,"HTML5图片压缩上传预览效果特效代码"是利用HTML5的File API、Canvas和Blob对象,实现用户在上传图片前进行压缩和预览的功能,有效减少了图片的存储空间占用,提高了网站性能,并提升了用户体验。...
在这个项目中,"HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码.zip",我们主要关注的是HTML5的File API和一个名为zyfile.js的JavaScript插件。 1. HTML5 File API: File API是HTML5的重要组成部分...
6. 图片相册交互:JS 可以实现图片相册的多种交互效果,如点击弹出大图、左右滑动切换图片、缩略图预览等。 7. 动态滤镜:通过操作像素数据,JS 可以实现类似Instagram的图片滤镜效果,让用户在查看图片时有更多...
在这个"HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码"中,我们可以看到HTML5的文件API被巧妙地利用来实现了一种互动式的图片预览和上传功能。 首先,HTML5的File API允许开发者在用户选择文件后...
通过fileinput.js,我们可以轻松实现图片上传的预览功能,用户在选择图片后即可即时看到预览效果,提升用户体验。 在创建图片上传预览插件的过程中,以下步骤是关键: 1. **初始化fileinput.js**:在HTML中添加...
这个功能对于网页中的图片上传交互非常实用,可以提升用户体验,让用户在上传图片前就能看到预览效果,避免因图片格式或尺寸问题导致的上传错误。 SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它...
通过`FileReader`对象的`readAsDataURL`方法,将图片文件转换为Base64编码的URL,然后设置到`<img>`标签的`src`属性,实现预览效果。 2. **多文件选择**:HTML5的`<input type="file">`元素支持多选文件,用户可以...
通过`event.target.files`可以获取到用户选择的文件对象,然后使用`FileReader` API的`readAsDataURL()`方法将图片文件转换为Base64编码的字符串,该字符串可以作为`<img>`标签的`src`属性,实现图片的预览效果。...