实现图片上传前本地预览功能之二

最新推荐文章于 2019-04-26 18:35:55 发布
最新推荐文章于 2019-04-26 18:35:55 发布
阅读量196 收藏
点赞数
分类专栏： Jquery

我这个试用起来比之前那个加载要快

[html]  view plain  copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>demo imgage preview</title>  
  13.       
  14.     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
  15.       
  16.     <script type="text/javascript">  
  17.   
  18.     function preview(file)    
  19.      {  
  20.          var imgSuffix = file.value.substr(file.value.length-4, 4);//得到图片后缀  
  21.          var imgFileName = file.value.split("\\")[2];//得到图片的名称加后缀  
  22.          imgUploadName = imgFileName;//将该图片的后缀赋给imgUploadName这个全局变量  
  23.          debugger  
  24.         if(imgSuffix ==".jpg"  || imgSuffix == ".gif" || imgSuffix == ".png"){  
  25.             var prevDiv = $("#showImg");  
  26.              if (file.files && file.files[0])  
  27.              {  
  28.                  var reader = new FileReader();  
  29.                  reader.onload = function(evt)  
  30.                  {   
  31.                     //id用于修改的时候赋值  
  32.                     prevDiv.prop("src",evt.target.result)  
  33.                  }  
  34.                  reader.readAsDataURL(file.files[0]);  
  35.             }  
  36.         }else{  
  37.             alert("图片的格式不正确");  
  38.             file.value = "";  
  39.         }  
  40.      }  
  41.     </script>  
  42.   
  43.   </head>  
  44.     
  45.   <body>  
  46.     <div></div><input type="file" name="bankImgU" onchange="preview(this)"/><div><a href="javascript:;"></a>  
  47.     <div></div><img id="showImg" height="40px" width="100px"/></div>  
  48.   </body>  
  49. </html>  
qq_39010381
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq图片按钮上传图片_jquery实现图片上传前本地预览功能
weixin_32133403的博客
01-27 322
这篇文章主要为大家详细介绍了基于jquery实现图片上传前本地预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了jquery实现图片上传前预览的具体代码，供大家参考，具体内容如下介绍之前有一个小问题，一直找不到图片预览时，图片不出来的原因，原来在于图片的路径！！！一直写的是图片的本地路径，没有什么用。直接上代码。html部分：input:fi...
jquery实现图片上传前本地预览功能
10-22
主要为大家详细介绍了基于jquery实现图片上传前本地预览功能，感兴趣的小伙伴们可以参考一下
jsp 本地图片上传前的预览
06-21
此工程下页面test.jsp为图片选中预览功能实现
带图片预览功能的图片上传
在JAVA的世界中“乘风破浪”
05-18 8342
网页特效|Linkweb.cn/Js|---带图片预览功能的图片上传代码function viewmypic(mypic,imgfile) {if (imgfile.value){mypic.src=imgfile.value;mypic.style.display="";mypic.border=1;}} PS:如果要在网络上显示本地图片，比如图片路径为:D:/pic/桌面/物华
图片上传时,本地显示预览功能
老紫竹的专栏
09-29 1882
问的人很多，我就把最简单给大家。script type="text/javascript">function showImg(){  document.getElementById("IMG").src=document.getElementById("photo").value;}script>img src="" id="IMG" />input type="file" name="photo
上传本地图片
雷佳佳的博客
04-26 139
<input type="file"> </div> <script> var ipt=document.getElementsByTagName('input')[0];//先获取标签 ipt.onchange=function(e){ var file=this.files[0];//获取文件信息 v...
java中上传本地图片
热门推荐
chenxingde的博客
02-08 3万+
如果你想上传多张图片：http://blog.csdn.net/xuanzhangran/article/details/54929988 如果是上传单张如下： 点击上传图片按钮，上传本地 效果如图： 1：原始图框： 2：点击预览，弹出本地弹框： 3：选中图片点击打开/确认： 实现的代码如下： 前台代码： &lt;div class="row"&gt; &lt;span c...
JS中利用FileReader实现上传图片前本地预览功能
10-18
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定...下面通过本文给大家介绍JS中利用FileReader实现上传图片前本地预览功能，需要的朋友参考下
jquery实现图片上传前本地预览
10-19
主要为大家详细介绍了jquery实现图片上传前本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于jquery实现图片上传本地预览功能
10-23
主要介绍了基于jquery实现图片上传本地预览功能的相关资料,需要的朋友可以参考下
Java web图片上传本地预览,无需后台写接口
Amo_lt的博客
09-18 4017
前言本篇博客为转载，由于目前很多上传图片预览的插件都需要Java后台写方法先获取选择图片的接口，这个插件不需要。下载插件地址http://jquery.decadework.com/原作者博客地址http://zhouxiang.decadework.com/article/1000 再次鸣谢该作者，如果作者不想我转载这篇博文，请告诉我，我会删除☺改进插件有效性验证提示方式原来的插件，当有效性验证
一段基于Rust语言的计算斐波那契数列的代码
06-16
一段基于Rust语言的计算斐波那契数列的代码
神经网络详细介绍.docx
06-16
神经网络（Neural Network）是一种模仿生物神经系统结构和功能的计算模型。它由大量的神经元（或称为节点）组成，这些神经元通过突触（或称为连接）相互连接。神经网络可以用于各种人工智能任务，如图像识别、语音识别、自然语言处理等。 神经网络的基本结构包括输入层、隐藏层和输出层。其中，输入层接收外界的输入信息，隐藏层通过各种激活函数对输入信息进行处理和转换，输出层则将处理后的信息输出给外界。此外，神经网络还包括权重和偏置等参数，它们用于控制神经元之间的连接强度和偏移量。 神经网络的训练过程通常采用反向传播算法，即从输出层开始，根据输出误差向后传递并计算每个神经元的误差，然后根据误差调整神经元的权重和偏置，直到整个网络的输出误差达到最小值。 神经网络的应用非常广泛，如人脸识别、语音识别、自然语言处理、医疗诊断、金融预测等领域。随着深度学习技术的发展，神经网络的层数也越来越深，处理的信息也越来越复杂。
基于matlab 9 电平 H 桥逆变器.zip
06-16
代码下载：完整代码，可直接运行 ；运行版本：2022a或2019b或2014a；若运行有问题，可私信博主； **仿真咨询 1 各类智能优化算法改进及应用** 生产调度、经济调度、装配线调度、充电优化、车间调度、发车优化、水库调度、三维装箱、物流选址、货位优化、公交排班优化、充电桩布局优化、车间布局优化、集装箱船配载优化、水泵组合优化、解医疗资源分配优化、设施布局优化、可视域基站和无人机选址优化 **2 机器学习和深度学习方面** 卷积神经网络（CNN）、LSTM、支持向量机（SVM）、最小二乘支持向量机（LSSVM）、极限学习机（ELM）、核极限学习机（KELM）、BP、RBF、宽度学习、DBN、RF、RBF、DELM、XGBOOST、TCN实现风电预测、光伏预测、电池寿命预测、辐射源识别、交通流预测、负荷预测、股价预测、PM2.5浓度预测、电池健康状态预测、水体光学参数反演、NLOS信号识别、地铁停车精准预测、变压器故障诊断 **3 图像处理方面** 图像识别、图像分割、图像检测、图像隐藏、图像配准、图像拼接、图像融合、图像增强、图像压缩感知 **4 路径规划方面** 旅行商问题（TSP）、车辆路径问题（VRP、MVRP、CVRP、VRPTW等）、无人机三维路径规划、无人机协同、无人机编队、机器人路径规划、栅格地图路径规划、多式联运运输问题、车辆协同无人机路径规划、天线线性阵列分布优化、车间布局优化 **5 无人机应用方面** 无人机路径规划、无人机控制、无人机编队、无人机协同、无人机任务分配 **6 无线传感器定位及布局方面** 传感器部署优化、通信协议优化、路由优化、目标定位优化、Dv-Hop定位优化、Leach协议优化、WSN覆盖优化、组播优化、RSSI定位优化 **7 信号处理方面** 信号识别、信号加密、信号去噪、信号增强、雷达信号处理、信号水印嵌入提取、肌电信号、脑电信号、信号配时优化 **8 电力系统方面** 微电网优化、无功优化、配电网重构、储能配置 **9 元胞自动机方面** 交通流 人群疏散 病毒扩散 晶体生长 **10 雷达方面** 卡尔曼滤波跟踪、航迹关联、航迹融合
pyzmq-16.0.4.tar.gz
最新发布
06-16
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
php本科期末复习资料.zip
06-16
php本科期末复习资料.zip
数据库管理工具:dbeaver-ce-23.2.2-macos-x86-64.dmg
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
vue element upload实现图片本地预览
09-08
使用vue element upload组件实现图片本地预览，首先需要使用el-upload组件来实现文件上传功能。在el-upload标签中，需要定义以下属性： - action：上传文件的地址； - list-type：设置为"picture-card"，以卡片形式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值