如何从js文件上传问题，怎么解决_教程

第一步：新建HTML文件

使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。如图：

步骤阅读

第二步：写入html页面代码文件

在dreamweaver中输入以下页面代码：

<tr >

</tr>

</table>

<br />

</form></div>

注意，这段代码请放在<body>标签之类。如图：

第三步：写入css样式代码

在<head>标签之类输入以下样式代码：

<!--

.STYLE1 {color: #3399FF}

.STYLE7 { font-size: 16px

font-weight: bold

}

.STYLE9 {font-family: "华文彩云"

font-size: 48px

color: #FF0000

}

.STYLE11 {

font-size: 16px

color: #FF3300

}

-->

</style>

用以固定页面样式。如图：

第四步：检测页面样式

用浏览器打开html文件，查看页面样式，然后做修改调整。如图：

第五步：选择文件

点击页面左边的选择文件按钮，选中桌面文件，然后点手禅击打开，在页面上会显示文件名称，如图：

第六步：上传文件

点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。如图：

js采用File API 来上传文件的。

File API 由一组 JavaScript 对象以及事件构成。赋予开发人员 *** 作在 <input type=”file” … />文件选择控件中选定文件的能力。图 1 展示了 File API 所有的 JavaScript 的组合关系。

File API 简单示例

<body>

<p>

<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"

action="javascript: uploadAndSubmit()">

<p>Upload File: <input type="file" name="file" /></p>

</form>

<div>Progessing (in Bytes): <span id="bytesRead">

</span>/ <span id="bytesTotal"></span>

</div>

</p>

<物纳/body>

运行滚败效果：

一、Servlet实现文件上传，需要添加第三方提供的jar包

下载地址：

1) commons-fileupload-1.2.2-bin.zip: 点击打开链接

2) commons-io-2.3-bin.zip:点击打开链接

接着把这两个jar包放到 lib文件夹下：

二：文件上传的表单提交方式必须是POST方式，

编码类型：enctype="multipart/form-data"，默认是 application/x-www-form-urlencoded

比如：

三、举例：

1.fileupload.jsp

<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>

String path = requestgetContextPath()

String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">

<html>

<head>

<title>My JSP 'fileuploadjsp' starting page</title>

<!--

-->

</head>

<body>

用户名：<input type="text" name="usename"><br/>

上传文件：<input type="file" name="file1"><br/>

上传文件： <input type="file" name="file2"><br/>

</form>

</body>

</html>

2.实际处理文件上传的 FileUpLoad.java

package comservletfileupload

import javaioFile

import javaio*

import javaioIOException

import javaioPrintWriter

import javautilList

import javaxservletServletException

import javaxservlethttpHttpServlet

import javaxservlethttpHttpServletRequest

import javaxservlethttpHttpServletResponse

import orgapachecommonsfileuploadFileItem

import orgapachecommonsfileuploadFileUploadException

import orgapachecommonsfileuploaddiskDiskFileItemFactory

import orgapachecommonsfileuploadservletServletFileUpload

/**

* @author Administrator

* 文件顷耐上传

* 具体步骤：

* 1）获得磁盘文件条链乎逗目工厂 DiskFileItemFactory 要导包

* 2）利用 request 获取真实路径，供临时文件存储，和最终文件存储，这两个存储位置可不同，也可相同

* 3）对 DiskFileItemFactory 对象设置一些属性

* 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory)

* 目的是调用 parseRequest（request）方法获得 FileItem 集合list ，

* 5）在 FileItem 对象中获取信息，遍历，判断表单提交过来的信息是否是普通文本信息另做处理

* 6）

* 第一种用第三方提供的 itemwrite( new File(path,filename) )直接写到磁盘上

* 第二种手动处理

public class FileUpLoad extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

requestsetCharacterEncoding("utf-8")//设置编码

//获得磁盘文件条目工厂

DiskFileItemFactory factory = new DiskFileItemFactory()

//获取文件需要上传到的路径

String path = requestgetRealPath("/upload")

//如果没以下两行设置的话，上传大的文件会占用很多内存，

//设置暂时存放的存储室 , 这个存储室，可以和最终存储文件的目录不同

/**

* 原理它是先存到暂时存储室，然后在真正写到对应目录的硬盘上，

* 按理来说当上传一个文件时，其实是上传了两份，第一个是以 tem 格式的

* 然后再将其真正写到对应目录的硬盘上

factorysetRepository(new File(path))

//设置缓存的大小，当上传文件的容量超过该缓存时，直接放到暂时存储室

factorysetSizeThreshold(1024*1024)

//高水平的API文件上传处理

ServletFileUpload upload = new ServletFileUpload(factory)

try {

//可以上传多个文件

List<FileItem>list = (List<FileItem>)uploadparseRequest(request)

for(FileItem item : list)

{

//获取表单的属性名字

String name = itemgetFieldName()

//如果获取的表单信息是普通的文本信息

if(itemisFormField())

{

//获取用户具体输入的字符串，名字起得挺好，因为表单提交过来的是字符串类型的

String value = itemgetString()

requestsetAttribute(name, value)

}

//对传入的非简单的字符串进行处理，比如说二进制的图片，电影这些

else

{

/**

* 以下三步，主要获取上传文件的名字

//获取路径名

String value = itemgetName()

//索引到最后一个反斜杠

int start = valuelastIndexOf("\\")

//截取上传文件的字符串名字，加1是去掉反斜杠，

String filename = valuesubstring(start+1)

requestsetAttribute(name, filename)

//真正写到磁盘上

//它抛出的异常用exception 捕捉

//itemwrite( new File(path,filename) )//第三方提供的

//手动写的

OutputStream out = new FileOutputStream(new File(path,filename))

InputStream in = itemgetInputStream()

int length = 0

byte [] buf = new byte[1024]

Systemoutprintln("获取上传文件的总共的容量："+itemgetSize())

// inread(buf) 每次读到的数据存放在 buf 数组中

while( (length = inread(buf) ) != -1)

{

//在 buf 数组中取出数据写到（输出流）磁盘上

outwrite(buf, 0, length)

}

inclose()

outclose()

}

} catch (FileUploadException e) {

// TODO Auto-generated catch block

eprintStackTrace()

}

catch (Exception e) {

// TODO Auto-generated catch block

//eprintStackTrace()

}

requestgetRequestDispatcher("filedemojsp")forward(request, response)

}

System.out.println("获取上传文件的总共的容量："+item.getSize())

3.filedemo.jsp

<%@ page language="java" import="javautil*" pageEncoding="UTF-8"%>

String path = requestgetContextPath()

String basePath = requestgetScheme()+"://"+requestgetServerName()+":"+requestgetServerPort()+path+"/"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN">

<html>

<head>

<title>My JSP 'filedemojsp' starting page</title>

<!--

-->

</head>

<body>

用户名：${requestScopeusename } <br/>

文件：${requestScopefile1 }<br/>

${requestScopefile2 }<br/>

</body>

</html>

4结果页面：

以上就是本文的全部

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/12255832.html

如何从js文件上传问题，怎么解决

发表评论

评论列表（0条）