预览上传图片的javaScript代码

最新推荐文章于 2023-10-26 09:05:13 发布
最新推荐文章于 2023-10-26 09:05:13 发布
阅读量421 收藏
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UG_2011/article/details/8134751
版权

第一种方法：

 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 

 <head> 

 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 

 <script> 

 var picPath; 

 var image; 

 // preview picture 

 function preview(){ 

 

    // 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片 

 

    document.getElementById('box').innerHTML 

    = "<img width='"+image.width+"' height='"+image.height+"'id='aPic' src='"+picPath+"'>"; 

 } 

 

 function loadImage(ele) { 

    picPath   = getPath(ele); 

    image     = new Image(); 

    image.src = picPath; 

    preview(); 

 } 

 

 function getPath(obj){ 

    if(obj){ 

        //ie 

        if (window.navigator.userAgent.indexOf("MSIE")>=1){ 

             obj.select(); 

             // IE下取得图片的本地路径 

             returndocument.selection.createRange().text; 

        } 

 

        //firefox 

        else if(window.navigator.userAgent.indexOf("Firefox")>=1){ 

             if(obj.files){ 

                 // Firefox下取得的是图片的数据 

                 returnobj.files.item(0).getAsDataURL(); 

             } 

             return obj.value; 

 

        } 

        return obj.value; 

    } 

 } 

 

 </script> 

 </head> 

 <body> 

 <input type="file"name="pic" id="pic" οnchange='loadImage(this);' /> 

 <div id='box'></div> 

 </body> 

 </html>

第二种方法：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 

 <htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 

 

 <head> 

 

 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 

 

 <script language="UTF-8"type="text/javascript">

       function PreviewImage(imgFile) {

 

              var filextension =imgFile.value.substring(imgFile.value

                            .lastIndexOf("."),imgFile.value.length);

              document.getElementById("imgPreviewone").style.display= "block";

              filextension =filextension.toLowerCase();

              if ((filextension != '.jpg') &&(filextension != '.gif')

                            && (filextension != '.jpeg')&& (filextension != '.png')

                            && (filextension != '.bmp')) {

                     alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢!");

                     imgFile.focus();

              } else {

                     varpath;

                     if(document.all)//IE

                     {

                            imgFile.select();

                            path =document.selection.createRange().text;

                            document.getElementById("imgPreviewone").innerHTML= "";

                            document.getElementById("imgPreviewone").style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""

                                          + path + "\")";//使用滤镜效果

                     }else//FF

                     {

                            path = imgFile.files[0].getAsDataURL();

                            document.getElementById("imgPreviewone").innerHTML= "<img id='img1' width='120px' height='100px' src='"+path+"'/>";

                            //document.getElementById("img1").src= path;

                     }

              }

       }

</script>

 </head> 

 

 <body>

        <ul>

               <listyle="margin-left:10px;margin-top:50px;">

                      <div id="imgPreviewone"style="width:200px;height:200px;">

                            <img src=""id="imgPreview" style="width:200px;height:200px;" />

                     </div>

                     <br/>

              </li>

              <listyle="margin-left:10px;margin-top:50px;">

                     <inputname="upload" id="upload"style="width:200px;height:20px;line-height:20px;"

              type="file"οnchange="PreviewImage(this)"/>

                     <br/>

              </li> 

              <!--一定要给出预览图片div的大小 -->

       </ul>

 

 </body> 

 

</html>

 

 

UG_2011
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中的FileReader图片预览上传功能实现代码
10-19
本文通过实例代码给大家介绍了js中的FileReader图片预览上传功能，代码分为html和js代码两部分，具体实现代码大家参考下本
javascript实现上传图片并预览的效果实现代码
10-28
图片上传预览，就是在使用文件选择框选择了文件之后就可以在页面上看见图片的效果，关于这个效果我一直认为是无法做到的
图片上传代码参考。
为中华之崛起而读书！
12-26 643
后台代码： bool fileok = false;            string Attachment = String.Empty;            string path = Server.MapPath("Upload/Question/");//定义目标文件夹            string pathinDB = "Upload/Question/";    
上传文件图片的代码
Herro09的专栏
01-25 641
首先是弹出页面上传页面：   language="javascript">         function ShowuploadPic(flag){                               var str=window.showModalDialog("UpfileImg.aspx?&new Date()","Dialog Arguments Value
JavaScript 图片上传预览
wgq2020的博客
10-26 178
使用它可以读取本地文件，并在浏览器中预览。我们可以利用这个属性，实现图片上传预览。以上代码实现了图片上传预览的基本功能，如果您需要处理更多的上传操作，可以在这个基础上进行扩展。
php代码文件预览功能,JavaScript代码实现txt文件的上传预览功能
weixin_30806145的博客
03-11 145
今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。表单按钮使用js的onchange=”uploadfile()”事件，function函数代码如下所示：//此处为txt文件上传预览的js代码function uploadfile(){var file=$("#txt")[0].files[0];...
html在线预览图片,javascript简单代码实现图片上传预览
weixin_42332123的博客
05-31 200
废话不多说，直接贴代码function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {url = window.createObjectURL(file)} else if (window.URL != undefined) {url = window.URL.createObjectURL...
JavaScript代码实现txt文件的上传预览功能
10-18
本篇文章给大家介绍了JavaScript代码实现txt文件的上传预览功能，文字代码相结合的形式给大家介绍的非常详细，需要的朋友参考下吧
JavaScript File API文件上传预览
10-22
主要为大家详细介绍了JavaScript File API实现文件上传预览的详细代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar
04-25
【微信小程序毕业设计】书店系统开发项目(源码+演示视频+说明).rar 【项目技术】 微信小程序开发工具+java后端+mysql 【演示视频-编号：246】 https://pan.quark.cn/s/cb634e7c02b5 【实现功能】 用户信息管理，图书信息管理，图书类型管理，图书留言管理，论坛信息管理等
基于java的-44-17-宠物销售系统-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
Web开发工具和方法课程的学术项目Java、Spring、Hibernate、Angular
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
spring-boot 集成geotools工具包（高分项目）.zip
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
决策树.zip0002
04-25
决策树， 决策树（Decision Tree）是一种常见的数据挖掘算法，它模仿人类决策过程来预测数据。决策树是一种树形结构，它从根节点开始，分支延伸至叶节点，每个内部节点代表了某个特征的测试，而每个叶节点代表了最终的预测结果。
小程序-24-基于微信小程序的美容院管理系统-源码.zip
04-25
提供的源码资源涵盖了小程序应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
web端上传图片完整代码
09-09
当用户选择一张图片并点击上传按钮时，通过JavaScript代码监听表单的submit事件，获取用户选择的文件并使用FileReader对象来读取文件内容。读取完成后，将图片的URL设置为预览区域中的img元素的src属性，从而显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值