`
mefly
  • 浏览: 150646 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

图片上传前用JS代码进行预览

HTML 
阅读更多
<!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>
分享到：
| 5.struts2.16新特性之一Convention Plugin ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js图片上传预览效果

    `ImagePreviewd.htm`可能是前端的预览页面，它包含了展示图片预览的HTML结构和JavaScript代码。在该页面中，JavaScript将与服务器端的ASHX文件交互，获取图片数据并在浏览器中显示。 `o_addfile.jpg`可能是一个示例...

    js读取本地图片进行预览，上传服务器

    1. **图片尺寸限制**：在预览和上传前，可能需要对图片进行裁剪或压缩，以减少上传的数据量和服务器存储空间。 2. **多图上传**：如果允许用户一次上传多张图片，需要处理多个文件。 3. **错误处理**：确保有适当的...

    js上传图片预览图片.pdf

    本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先，在HTML文件中，我们需要添加一个文件上传input控件 `(this)"&gt;`，该控件用于选择要上传的图片文件。在JavaScript代码中，我们可以...

    js图片上传并预览图片

    5. **Canvas处理图片**：除了预览，我们还可以利用Canvas对图片进行一些处理，如缩放、裁剪、添加水印等。通过`canvas.getContext('2d')`获取2D渲染上下文，然后调用相关方法如`drawImage()`完成操作，最后`canvas....

    图片预览截图上传代码

    这个“图片预览截图上传代码”项目提供了这样的功能，模仿了QQ头像设置的过程，让用户在上传图片前能够预览效果，并能进行截图操作，最终将处理后的图片上传至服务器，且数据库会存储图片的路径信息。以下是这个项目...

    js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器不兼容

    这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器"，表明这是一个旨在解决浏览器兼容性问题的解决方案，涵盖了老版本的Internet Explorer（IE6到IE9）以及Firefox、Chrome、Opera...

    js上传图片预览

    在JavaScript中，实现图片上传前的本地预览是一项常见的需求，尤其在网页表单或社交媒体应用中。这个功能允许用户在正式提交之前查看所选图片的效果，提高用户体验。本篇文章将详细探讨如何利用JavaScript实现这一...

    支持批量上传、JS图片预览的前端上传组件

    【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...

    C#上传图片预览11111

    5. 异步处理：为了提供更好的用户体验，通常会使用异步处理技术，如ASP.NET的AsyncController或WebAPI，以及JavaScript的Ajax请求，使得图片预览和上传过程不会阻塞用户界面。 6. 安全性考虑：在处理用户上传的图片...

    纯 js 实现得 图片上传预览插件

    5. **CSS样式调整**：为了实现类似微信朋友圈的预览效果，可能需要对预览图片进行布局和尺寸调整。这涉及到CSS的布局模式（如`display: flex`或`grid`）、尺寸控制（如`width`、`height`、`max-width`和`max-height`...

    fileupload上传图片前预览

    例如，对上传的图片进行缩略图处理，可以减少服务器存储空间和网络传输的负担；使用哈希算法验证文件内容，防止恶意篡改；还可以利用CDN服务分发静态资源，减轻服务器压力。 综上所述，实现ASP.NET中的图片预览功能...

    ASP js图片上传代码.rar

    3. JavaScript交互：前端的JavaScript代码负责监听文件选择事件，创建XMLHttpRequest对象，使用POST方式发送文件数据。`FormData`对象可以帮助我们方便地构造HTTP请求体，包含上传的文件。 4. 安全性：上传过程中要...

    .Net图片上传预览

    - 对上传的图片进行缩放或裁剪，防止大尺寸图片消耗过多服务器资源。 7. **文件存储策略**： - 可以选择将图片直接保存在服务器硬盘，或者利用云存储服务如Azure Blob Storage、AWS S3等。 - 为每个文件生成唯一...

    原生JS实现图片上传前的预览

    以上就是使用原生JS实现图片上传前预览的基本步骤和关键知识点。在实际项目中，你可能会遇到更多的需求，如多图预览、图片裁剪等，这些都是在此基础上进行扩展的。通过深入理解File API和`FileReader`，你可以更灵活...

    图片上传，html页面，本地预览，后台前台页面代码都有

    总结来说，这个项目提供了一套完整的图片上传方案，包括前端的HTML和JavaScript实现的图片预览，以及后端的JSP处理图片上传。通过这样的实践，开发者可以更好地理解前后端协作处理文件上传的整个流程，从而在实际...

    图片上传预览JS代码

    在网页开发中，图片上传预览功能是一个常见且重要的需求，尤其在用户需要在提交前确认上传图片的效果时。这个功能通常使用JavaScript（JS）来实现，因为JS提供了丰富的交互性和浏览器兼容性。本篇文章将深入探讨如何...

    强大的jQuery多图片上传预览代码.zip

    代码片段： *{ 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 ...

    jQuery php图片上传预览插件_头像上传预览代码

    本文将深入探讨使用jQuery和PHP实现图片上传预览的技术细节，以及如何结合头像上传进行预览。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML DOM操作、事件处理、动画和Ajax交互。在图片上传预览中，...

    原生JS简单图片上传预览代码.zip

    标题中的“原生JS简单图片上传预览代码”指的是使用JavaScript（不依赖任何第三方库，除了描述中提到的jQuery）实现的一个功能，该功能允许用户选择图片并进行上传前的预览。在网页中，这样的功能通常是通过HTML5的...

Magicbox
Global site tag (gtag.js) - Google Analytics