上传图片在页面上显示

看了别人写的 自己照着写了一下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'sc.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!----><script src="<%=basePath%>js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>function showPicture(value){  // var docObj=document.getElementById("file");  var docObj=$("#file").get(0); // var imgObjPreview=document.getElementById("myPic");  var imgObjPreview= $("#myPic").get(0);if(docObj.files &&docObj.files[0])  {  //火狐下,直接设img属性  
        imgObjPreview.style.display = 'block';  imgObjPreview.style.width = '150px';  imgObjPreview.style.height = '180px';   //imgObjPreview.src = docObj.files[0].getAsDataURL();  //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式  
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  }  else  {  //IE下,使用滤镜  
        docObj.select();  var imgSrc = document.selection.createRange().text;  // var localImagId = document.getElementById("localImg");  var localImagId = $("#localImg").get(0);  //必须设置初始大小  
        localImagId.style.width = "150px";  localImagId.style.height = "180px";  //图片异常的捕捉,防止用户修改后缀来伪造图片  try{  localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  }  catch(e)  {  alert("您上传的图片格式不正确,请重新选择!");  return false;  }  imgObjPreview.style.display = 'none';  document.selection.empty();  }  return true;  
} 
</script></head><body><div  id="localImg">  <img src="" id="myPic" />  </div>  <form id="form" action="#" method="post" enctype="multipart/form-data">  <input type="file" id="file" name="file" onchange="showPicture(this.value)">                         </form>  </body>
</html>
页面

 

转载于:https://www.cnblogs.com/yang1018/p/7365711.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/400172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【STC15库函数上手笔记】9、硬件SPI

目录硬件知识库函数spi.cspi.h测试main.c实验现象STC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬件知识 摘自《STC15系列单片机器件手册》 STC15系列单片机还提供另一种高速串行通信接口——SPI接口。SPI是一种全双工…

中介者模式分析、结构图及基本代码

&#xfeff;&#xfeff;定义&#xff1a;用一个中介对象来封装一系列的对象交互。中介者使各对象不须要显式地相互引用。从而使其耦合松散&#xff0c;并且能够独立地改变它们之间的交互。适用地方&#xff1a;中介者模式一般应用于一组对象以定义良好可是复杂的方式进行通信…

WordPress 数据库结构及表字段作用解析

对于WordPress的开发可以说子凡已经是如痴如醉了&#xff0c;通过 WordPress 本身的开放性接口可以做到很多的事情&#xff0c;但是有些时候我们可能更喜欢直接查询数据库来实现某些 WordPress 没有提供的函数来实现目的&#xff0c;所以这时候我们就需要对WordPress 数据库的结…

硬件负载均衡设备介绍

最常用是F5 与citrix netscaler 负载均衡分全局负载均衡和本地负载均衡。 地负载均衡是指对本地的服务器群做负载均衡&#xff0c;全局负载均衡是指对分别放置在不同的地理位置、有不同网络结构的服务器群间作负载均衡。 循环DNS 就是每次解析域名时指向IP loop list 里的下一个…

【STC15库函数上手笔记】10、EEPROM

目录硬件知识基本介绍软件知识EEPROM多字节读函数EEPROM多字节写函数EEPROM扇区擦除函数函数测试main.c实验现象STC实验箱4 IAP15W4K58S4 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬件知识 基本介绍 摘自《STC15系列单片机器件手册》 STC…

【51单片机快速入门指南】4.6:I2C 与 PCF8563实时时钟日历芯片

目录硬知识概述特性功能描述报警功能模式定时器模式CLKOUT输出复位低电压检测器和时钟监视器低电压检测器和时钟监视器寄存器结构寄存器概述BCD编码格式寄存器概述Control/Status 1 寄存器&#xff08;内存地址00H&#xff09;Control/Status 2 寄存器&#xff08;内存地址01H&…

利用MySQL语句批量替换指定wordpress文章中的图片路径

天花了很多时间将SAE服务器中的图片下载到本地&#xff0c;然后删掉&#xff0c;但是有一个问题就是&#xff0c;所有文章中的图片路径还是以前的&#xff0c;没有根据域名来。导致下午某些时间段图片都是无法显示的&#xff0c;后来想到用MySQL直接批量替换&#xff0c;执行才…

【51单片机快速入门指南】6.4:DHT11、DHT22单总线温湿度传感器

目录硬知识DHT11DHT22通信协议读取步骤数据解读DHT11DHT22示例程序DHT11_22.cDHT11_22.h测试程序main.c实验现象DHT11DHT22STC89C52 Windows 10 20H2 Proteus 8 Frofessional v8.9 SP2 Keil uVision V5.29.0.0 PK51 Prof.Developers Kit Version:9.60.0.0 硬知识 摘自《温湿…

【电路补习笔记】1、电阻的参数与选型

目录参数精度温度系数功率贴片电阻色环电阻传感器电阻老师的主页&#xff1a;唐老师讲电赛 视频地址&#xff1a;唐老师讲电赛之唐老师讲电子器件&#xff08;1&#xff09;电阻参数与选型 电阻按封装分为直插、贴片与印刷电阻&#xff08;有些电阻直接印刷在PCB上&#xff09;…

redis本地安装

redis在本地的安装及使用1、首先下载redis安装包&#xff0c;下载地址如下 http://pecl.php.net/package/redis/2.2.7/windows输入phpinfo()查看php版本进行相应的下载&#xff0c;注意版本2、下载完成后将php_redis.dll放到ext下&#xff0c;在php.ini中添加extensionphp_re…

【Net】测试网络、查看IP

http://www.speedtest.cn/ 转载于:https://www.cnblogs.com/flydkPocketMagic/p/7380400.html

【电路补习笔记】2、电容的参数与选型

目录分类无极性电容有极性电容电解电容钽电容参数精度温度系数材质耐压温度范围ESRESL电容并联高频特性焊盘&#xff08;PAD&#xff09;和旁路电容的放置老师的主页&#xff1a;唐老师讲电赛 视频地址&#xff1a;唐老师讲电赛之唐老师讲电子器件&#xff08;1&#xff09;电容…

1005:I Think I Need a Houseboat-poj

1005:I Think I Need a Houseboat 总时间限制: 1000ms内存限制: 65536kB描述Fred Mapper is considering purchasing some land in Louisiana to build his house on. In the process of investigating the land, he learned that the state of Louisiana is actually shrinkin…

【电路补习笔记】3、电感的参数与选型

目录分类电感的模型参数精度直流电阻&#xff08;DCR&#xff09;通流能力&#xff08;Irms&#xff09;自谐振频率&#xff08;SRF&#xff09;饱和电流&#xff08;Isat&#xff09;标号老师的主页&#xff1a;唐老师讲电赛 视频地址&#xff1a;唐老师讲电赛之唐老师讲电子器…

八排序算法

概述 排序有内部排序和外部排序。内部排序是数据记录在内存中进行排序&#xff0c;而外部排序是因排序的数据非常大&#xff0c;一次不能容纳所有的排序记录。在排序过程中须要訪问外存。 我们这里说说八大排序就是内部排序。 当n较大。则应採用时间复杂度为O(nlog2n)的排序方法…

【电路补习笔记】4、二极管的参数与选型

目录常用二极管二极管的结构与特性结构参数最大整流电流IFI_FIF​最大反向工作电压URU_RUR​反向电流IRI_RIR​最高工作频率fMf_MfM​应用常见应用单相整流电路单相半波整流电路单相桥式整流电路稳压管稳压管的伏安特性参数稳压值UZU_ZUZ​稳定电流IZI_ZIZ​额定功耗PZP_ZPZ​动…

@font-face 使用过程

格式&#xff1a; TureTpe(.ttf)格式&#xff1a; .ttf字体是Windows和Mac的最常见的字体&#xff0c;是一种RAW格式&#xff0c;因此他不为网站优化,支持这种字体的浏览器有【IE9,Firefox3.5,Chrome4,Safari3,Opera10,iOS Mobile Safari4.2】 OpenType(.otf)格式&#xff1a;…

【电路补习笔记】5、三极管的参数与选型

目录常用的三极管型号结构作用放大三极管的三种放大组态的比较共射极放大电路单管共射放大电路&#xff08;受温度影响大&#xff09;的动态特性单管共射分压偏置放大电路的动态特性共集电极放大电路使用共基极放大电路多级放大电路多级放大电路的耦合多级放大电路的动态分析开…

FFT 专题讲解

FFT是什么&#xff1f; FFT是快速傅里叶变换(fast Fourier transform)的简称。在ACM领域主要是用来快速求解多项式乘法的算法&#xff0c; 在信号领域也有很大用途 基础知识 卷积 举个例子&#xff0c;给你两个向量 \(a (a_0, a_1, a_2), b(b_0, b_1, b_2)\) a和b的卷积就是$ (…

PureMvc学习笔记

2019独角兽企业重金招聘Python工程师标准>>> PureMvc学习笔记&#xff1a; Mediator ->对应View层&#xff0c;内部绑定View对象&#xff0c;由 Mediator 对象来操作具体的视图组件。&#xff08;它的作用还包括&#xff1a;添加事件监听器&#xff0c;发送或接收…