java或js怎么获取上传后的图片呢?在界面<img src="">要怎么设置呢?谁能帮我看下

JavaScript027

java或js怎么获取上传后的图片呢?在界面<img src="">要怎么设置呢?谁能帮我看下,第1张

上传用本地地址 查看用网络地址

你上传保留的位置在tomcat的项目下。

webapps/文件夹/文件

然后访问的时候用

http://ip:端口/项目名/文件夹/文件

src填这个就行了

环境准备

1. 下载并安装Tomcat(已经有很多关于Tomcat安装以及使用的文章,在这里不再介绍);

2. 下载File upload的jar包commons-fileupload-1.0-beta-1.jar,并将该文件拷贝到{$TOMCAT}/common/lib目录下(其中{$TOMCAT}为Tomcat的安装目录);

3. 由于Fileupload子项目同时要用到另外一个项目commons-Beanutils,所以必须下载Beanutils,并将解压后的文件commons-beanutils.jar拷贝到{$TOMCAT}/common/lib目录下。

开发文件上传页面

文件上传的界面如图1所示。为了增加效率我们设计了三个文件域,同时上传三个文件。

图1 文件上传界面

页面的HTML代码如下:

<html>

<head>

<title>文件上传演示</title>

</head>

<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>

<center>

<h1>文件上传演示</h1>

<form name=“uploadform”method=“POST” action=“save.jsp”ENCTYPE=“multipart/form-data”>

<table border=“1”width=“450”cellpadding=“4” cellspacing=“2”bordercolor=“#9BD7FF”>

<tr><td width=“100%”colspan=“2”>

文件1:<input name=“file1”size=“40”type=“file”>

</td></tr>

<tr><td width=“100%”colspan=“2”>

文件2:<input name=“file2”size=“40”type=“file”>

</td></tr>

<tr><td width=“100%”colspan=“2”>

文件3:<input name=“file3”size=“40”type=“file”>

</td></tr>

</table>

<br/><br/>

<table>

<tr><td align=“center”><input name=“upload” type=“submit”value=“开始上传”/></td></tr>

</table>

</form>

</center>

</body>

</html>

代码中要特别注意的是黑体处。必须保证表单的ENCTYPE属性值为multipart/form-data,这样浏览器才能正确执行上传文件的操作。

处理上传文件信息

由于本文主要是讲述如何使用Commons-fileupload,所以为了便于修改、调试,上传文件的保存使用一个JSP文件来进行处理。我们将浏览器上传来的所有文件保存在一个指定目录下并在页面上显示所有上传文件的详细信息。保存页面处理结果见图2所示。

图2 保存页面

下面来看看save.jsp的代码:

<%

/**

* 演示文件上传的处理

* @author <a href=“mailto:winter.lau@163.com”>Winter Lau</a>

* @version $Id: save.jsp,v 1.00 2003/03/01 10:10:15

*/

%>

<%@ page language=“java”contentType=“text/htmlcharset=GBK”%>

<%@ page import=“java.util.*”%>

<%@ page import=“org.apache.commons.fileupload.*”%>

<html>

<head>

<title>保存上传文件</title>

</head>

<%

String msg = “”

FileUpload fu = new FileUpload()

// 设置允许用户上传文件大小,单位:字节

fu.setSizeMax(10000000)

// maximum size that will be stored in memory?

// 设置最多只允许在内存中存储的数据,单位:字节

fu.setSizeThreshold(4096)

// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录

fu.setRepositoryPath(“C:\\TEMP”)

//开始读取上传信息

List fileItems = fu.parseRequest(request)

%>

<body bgcolor=“#FFFFFF”text=“#000000” leftmargin=“0”topmargin=“40”marginwidth=“0” marginheight=“0”>

<font size=“6”color=“blue”>文件列表:</font>

<center>

<table cellpadding=0 cellspacing=1 border=1 width=“100%”>

<tr>

<td bgcolor=“#008080”>文件名</td>

<td bgcolor=“#008080”>大小</td>

</tr>

<%

// 依次处理每个上传的文件

Iterator iter = fileItems.iterator()

while (iter.hasNext()) {

FileItem item = (FileItem) iter.next()

//忽略其他不是文件域的所有表单信息

if (!item.isFormField()) {

String name = item.getName()

long size = item.getSize()

if((name==null||name.equals(“”)) &&size==0)

continue

%>

<tr>

<td><%=item.getName()%></td>

<td><%=item.getSize()%></td>

</tr>

<%

//保存上传的文件到指定的目录

name = name.replace(‘:’,‘_’)

name = name.replace(‘\\’,‘_’)

item.write(“F:\\”+ name)

}

}

%>

</table>

<br/><br/>

<a href=“upload.html”>返回上传页面</a>

</center>

</body>

</html>

在这个文件中需要注意的是FileUpload对象的一些参数值的意义,如下面代码所示的三个参数sizeMax、sizeThreshold、repositoryPath:

FileUpload fu = new FileUpload()

// 设置允许用户上传文件大小,单位:字节

fu.setSizeMax(10000000)

// maximum size that will be stored in memory?

// 设置最多只允许在内存中存储的数据,单位:字节

fu.setSizeThreshold(4096)

// 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录

fu.setRepositoryPath(“C:\\TEMP”)

这3个参数的意义分别为:

SizeMax 用来设置上传文件大小的最大值,一旦用户上传的文件大小超过该值时将会抛出一个FileUploadException异常,提示文件太大;

SizeThreshold 设置内存中缓冲区的大小,一旦文件的大小超过该值的时候,程序会自动将其它数据存放在repositoryPath指定的目录下作为缓冲。合理设置该参数的值可以保证服务器稳定高效的运行;

RepositoryPath 指定缓冲区目录。

使用注意事项

从实际应用的结果来看该模块能够稳定高效的工作。其中参数SizeThreshold的值至关重要,设置太大会占用过多的内存,设置太小会频繁使用硬盘作为缓冲以致牺牲性能。因此,设置该值时要根据用户上传文件大小分布情况来设定。例如大部分文件大小集中在100KB左右,则可以使用100KB作为该参数的值,当然了再大就不合适了。使用commons-fileupload来处理HTTP文件上传的功能模块很小,但是值得研究的东西很多。

方法如下

<html>

<head>

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

<title></title>

</head>

<body>

<script>   

window.onload=function(){

var Imgbtn=document.getElementById('btn')

var Img=document.getElementById('img')

Imgbtn.onclick=function(){

if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png')            {          

Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg'

}else{

Img.src='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png'

}

}

}

</script>

<div id="bg">

<div id="btn">

<div id="txt">试客小兵</div>

<img id="img" src="http://dl.bizhi.sogou.com/images/2012/01/19/191337.png">

</div>

</div>

</body>

</html>

扩展资料

JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}︰

Javascript被归类为直译语言,因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行,其他引擎则是逐行解译(SpiderMonkey会将解译过的指令暂存,以提高性能,称为实时编译),但由于V8的核心部份多数用Javascript撰写(而SpiderMonkey是用C++),因此在不同的测试上,两者性能互有优劣。

与其相对应的是编译语言,例如C语言,以编译语言编写的程序在运行之前,必须经过编译,将代码编译为机器码,再加以运行。

参考资料:百度百科 JavaScript编程