带预览功能的图片上传

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量815 收藏 3
点赞数
文章标签： file javascript border action function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhfeng/article/details/6365027
版权

带预览功能的图片上传

 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>图片上传</title>
    </head>
<body>
<form name="fileupload" method="POST" action="upload.jsp" enctype="multipart/form-data">
    <table border="1" width="450" cellpadding="4" cellspacing="2" bordercolor="#9BD7FF">
         <tr>
             <td width="100%" colspan="2">请上传扩展名为JPG或者JPEG,且大小小于500K的图片</td>
        </tr>
      <tr>
           <td width="100%" colspan="2">
               <input name="file1" id="file1" size="40" type="file" οnchange="javascript:PreviewImg(this); ">
           </td>
      </tr>
      <tr>
          <td align="center" height="227">
              <div id="newPreview"><img id="defaultImg" src="images/01.gif" width="300" height="227" /></div>
          </td>
      </tr>
      <tr>
       <td width="100%" colspan="2"><center><input type="submit" value="开始上传"/></center> </td>
      </tr>
     </table>
     </form>
        <script type="text/javascript">
            function PreviewImg(imgFile){
                var newPreview = document.getElementById("newPreview");
                if(navigator.userAgent.indexOf("Mozilla/5.0")>-1){
                    document.getElementById("defaultImg").src =document.getElementById("file1").files[0].getAsDataURL();
                }else{
                    imgFile.select();
                    var img = document.selection.createRange().text;
                    newPreview.innerHTML="";
                    newPreview.style.width = "300px";    newPreview.style.height = "227px";
                    newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
                    newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img
                }
            }
        </script>
    </body>
</html>

lhfeng
关注
PHP上传图片带预览功能
03-27
以上代码实现了基本的图片上传和预览功能，但实际应用中可能还需要考虑其他方面，例如错误处理、文件名冲突、安全检查（防止恶意文件上传）、图像尺寸调整等。你可以根据项目需求进一步扩展这些功能，例如通过GD库或...
页面实现图片传输放大预览JS
lfy19921219的博客
07-30 918
tomcat  service.xml配置映射   featuredcontentslider.init({ id : "syFocusThumb", contentsource : [ "inline", "" ], toc : "scroll", nextprev : [ "", "" ], revealtype : "click", enablefade :
vue实现图片上传预览功能
10-15
在前端开发中，实现图片上传预览功能是一个非常常见的需求。本文将详细介绍在Vue框架中如何实现这一功能，并通过实例代码展示具体实现方法。 首先，实现图片上传预览功能主要包含以下几个步骤： 1. 用户界面设计：...
Angularjs实现上传图片预览功能
10-19
本文聚焦于如何利用AngularJS实现上传图片功能并预览所选图片，以下是详细介绍。 首先，需要了解的是在Web开发中实现文件上传功能，通常会使用HTML的元素，并将其type属性设置为file。用户可以通过点击该元素来选择...
js上传图片及预览功能实例分析
10-24
实现图片上传和预览功能的几个关键点如下： 1. HTML文件选择元素：首先，我们需要一个文件输入元素，用户通过它选择要上传的图片文件。 ```html ``` 2. 图片预览元素：其次，我们需要一个`<img>`元素来显示用户...
JS实现图片上传预览功能
10-21
在前端开发中，实现图片上传预览功能是一个常见的需求，这能让用户在上传之前对要上传的图片有一个直观的了解。本文将介绍如何通过JavaScript实现图片上传的预览功能，这部分代码在各主流浏览器上都进行了兼容性测试...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 501
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 166
【代码】如何使用Redisson的布隆过滤器？
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1083
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 826
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1296
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
跨境电商系统基本功能和特点​
商城 / Java 商城 -首选 商城 开源 电商 商城 源码 商城
09-29 381
综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。
从0学习React（3）
qq_54432917的博客
09-29 655
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
初学Vue
2302_80244686的博客
09-29 790
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
vue单点登录异步执行请求https://xxx.com获取并处理数据
m0_65360496的博客
09-27 379
vue单点登录异步执行请求https://xxx.com获取并处理数据
Vue脚手架搭建及vue项目创建
ning的博客
09-29 964
Vue CLI 是一个强大的工具，它简化了 Vue.js 项目的搭建和开发流程。通过几个简单的命令，我们可以快速创建一个功能完备的 Vue.js 项目，并开始开发。随着项目的深入，你还可以探索更多的 Vue CLI 功能和插件，以满足不同的开发需求。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章VUE快速入门手册——安装VUE脚手架（创建自己的第一个vue项目）Vue脚手架搭建及vue项目创建【详细教程】
【JavaEE初阶】深入解析单例模式中的饿汉模式，懒汉模式的实现以及线程安全问题
GGBond778的博客
09-29 2013
本期讲解了关于设计模式之单例模式中的两个重要模式，即饿汉模式和懒汉模式，关于他们的实现代码，也进行了编写；以及最重要的两个模式的线程安全问题，小编进行了注重分析问题的产生，以及如何解决都有涉及~~~
nodejs fs 模块的简介与相关案例
正是修行时，正是修行时，正式修行时...
09-27 365
nodejs fs 模块的简介与相关案例
影院管理新思路：小徐的Spring Boot实践
2402_85758349的博客
09-28 1026
Tomcat是非常受欢迎的服务器，因为它具有较好的扩展性，而且在运行的时候不需要太多的系统资源，拥有程序员所需要的收发邮件功能，还能够支持负载平衡，该程序能够不断的更新，程序员能够根据自己的需要增加新的功能。排错它是针对自己所知道的错误来做的事情并进行解决的。系统测试它是对做完一个系统进行最后的一项工作，因为我们在做系统的时候，在进行编码以后可以开始对软件进行测试，在测试当中我们可以找出这个软件的错误与缺陷，这样我们可以及时处理，不影响后期正常的使用，同时也方便我们在后期使用过程中出现的问题容易去找出。
ImageUploadView：图片上传预览功能实现
"本文主要介绍了如何使用分离与继承的思想实现图片上传后的预览功能，并将这一功能封装成ImageUploadView组件。文中通过需求分析、实现思路及代码示例，详细阐述了图片上传预览功能的实现过程。" 在网页开发中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值