上传图片在页面上显示

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

<%@ 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,一经查实,立即删除!

相关文章

Codeforces Round #307 (Div. 2) A. GukiZ and Contest 水题

A. GukiZ and Contest Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/551/problem/A Description Professor GukiZ likes programming contests. He especially likes to rate his students on the contests he prepares. Now, he has deci…

提高你的Java代码质量吧:使用valueof前必须进行校验

一、分析 每个枚举都是java.lang.Enum的子类&#xff0c;都可以访问Enum类提供的方法&#xff0c;比如hashCode、name、valueOf等&#xff0c;其中valueOf方法会把一个String类型的名称转变成枚举项&#xff0c;也就是在枚举项中查找字面值和该参数相等的枚举项。 我们来深入…

【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…

Android中shape中的属性大全

<shape><!-- 实心 --><solid android:color"#ff9d77"/><!-- 渐变 --><gradientandroid:startColor"#ff8c00"android:endColor"#FFFFFF"android:angle"270" /><!-- 描边 --><strokeandroid:wid…

Mysql 插入中文错误:Incorrect string value: '...' for column 'xx' at row 1

datasource url后面加上useUnicodetrue&characterEncodingutf-8alter table w default character set utf8; alter table w change score score varchar(50) character utf8; 转载于:https://www.cnblogs.com/orziii/p/7372339.html

修改WordPress中上传附件2M大小限制的方法

https://blog.csdn.net/u010486124/article/details/38348327?utm_sourceblogxgwz7 post_max_size512M upload_max_filesize512M

ASP.NET会员注册登录模块(MD5加密,Parameters防止SQL注入,判断是否注册)

MD5加密,Parameters防止SQL注入:protected void btnLog_Click(object sender, EventArgs e){//获取验证码string code txtCode.Text;//判断用户输入的验证码是否正确if (Request.Cookies["CheckCode"].Value code){//创建数据库连接SqlConnection con new SqlConn…

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

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

(转) Spring读书笔记-----Spring的Bean之配置依赖

前一篇博客介绍了Spring中的Bean的基本概念和作用域&#xff08;Spring读书笔记-----Spring的Bean之Bean的基本概念 &#xff09;,现在介绍Spring Bean的基本配置。 从开始我们知道Java应用中各组件的相互调用的实质可以归纳为依赖关系。根据注入方式的不同&#xff0c;Bean的依…

Luogu P1031 均分纸牌(贪心)

P1031 均分纸牌 题目描述 有 N 堆纸牌&#xff0c;编号分别为 1&#xff0c;2&#xff0c;…, N。每堆上有若干张&#xff0c;但纸牌总数必为 N 的倍数。可以在任一堆上取若干张纸牌&#xff0c;然后移动。 移牌规则为&#xff1a;在编号为 1 堆上取的纸牌&#xff0c;只能移到…

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

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

Head First summary

学习面向对象好几年了&#xff0c;但一直没有深刻的理解面向对象&#xff0c;直到最近开始做自动化测试平台开发过程中&#xff0c;才发现面向对象的魅力。因而决定好好把设计模式学习下。首先先了解下设计模式相关的定义以及主意事项&#xff1a; 1.  什么是设计模式&#x…

【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 硬知识 摘自《温湿…

获取编辑器两种方法

编辑器&#xff0c;是地图数据进行编辑的主要工具&#xff0c;这个Editor其实当一个新的地图开始时就创建了。事实上&#xff0c;其他ArcMap扩展对象也是在创建地图时产生的。 为了获得这个Editor&#xff0c;可以使用FindExtensionByCLSID 或者FindExtensionByName接口。 priv…

Redis持久化的简单介绍

Redis的强大功能很大程度上是由于其将所有数据都存储在内存中&#xff0c;为了使Redis在重启后仍能保证数据不丢失&#xff0c;需要将数据从内存中以某种形式持久化到硬盘中。 Redis支持两种方式的持久化&#xff0c;一种是RDB方式&#xff0c;一种是AOF方式。其中&#xff0c;…

图片响应式

img-responsive 编辑 本词条缺少概述图&#xff0c;补充相关内容使词条更完整&#xff0c;还能快速升级&#xff0c;赶紧来编辑吧&#xff01; img-responsive是图片响应式的意思&#xff0c;在Bootstrap框架中&#xff0c;有一个.img-responsive的CSS样式。应用这个样式以后…