js实现文件上传csdn（js获取上传文件）
**更新：**2022-11-16 17:15
本文目录一览：
- 请高手给一个JS多文件上传的例子（必须兼容IE）解决追加50分。请看补充。
- 如何从js文件上传问题，怎么解决
- js如何上传文件
- 使用jquery.form.js实现文件上传及进度条前端代码
- 几种js实现的动态多文件上传
- 原生js实现文件上传
请高手给一个JS多文件上传的例子（必须兼容IE）解决追加50分。请看补充。
一、Servlet实现文件上传，需要添加第三方提供的jar包 下载地址：
- commons-fileupload-1.2.2-bin.zip: 点击打开链接
- commons-io-2.3-bin.zip: 点击打开链接
接着把这两个jar包放到 lib文件夹下：
二：文件上传的表单提交方式必须是POST方式，
编码类型：
enctype="multipart/form-data"，默认是application/x-www-form-urlencoded比如：
<form action="FileUpLoad" enctype="multipart/form-data" method="post">
三、举例：
fileupload.jsp
<%@ 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 'fileupload.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<!-- enctype 默认是 application/x-www-form-urlencoded -->
<form action="FileUpLoad" enctype="multipart/form-data" method="post">
用户名：<input type="text" name="usename" /><br/>
上传文件：<input type="file" name="file1" /><br/>
上传文件：<input type="file" name="file2" /><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- 实际处理文件上传的
FileUpLoad.java
package com.servlet.fileupload;
import java.io.File;
import java.io.*;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.commons.fileupload.*;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* 文件上传
* 具体步骤：
* 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包
* 2） 利用 request 获取 真实路径 ，供临时文件存储，和 最终文件存储 ，这两个存储位置可不同，也可相同
* 3）对 DiskFileItemFactory 对象设置一些 属性
* 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory);
* 目的是调用 parseRequest(request)方法 获得 FileItem 集合list
* 5）在 FileItem 对象中 获取信息， 遍历， 判断 表单提交过来的信息 是否是 普通文本信息 另做处理
* 6）
* 第一种 用第三方 提供的 item.write( new File(path,filename) ); 直接写到磁盘上
* 第二种 手动处理
*/
public class FileUpLoad extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //设置编码
//获得磁盘文件条目工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//获取文件需要上传到的路径
String path = request.getRealPath("/upload");
//如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
//设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
/**
* 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上，
* 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem 格式的
* 然后再将其真正写到 对应目录的硬盘上
*/
factory.setRepository(new File(path));
//设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
factory.setSizeThreshold(1024*1024);
//高水平的API文件上传处理
ServletFileUpload upload = new ServletFileUpload(factory);
try {
//可以上传多个文件
List<FileItem> list = (List<FileItem>)upload.parseRequest(request);
for(FileItem item : list){
//获取表单的属性名字
String name = item.getFieldName();
//如果获取的 表单信息是普通的 文本 信息
if(item.isFormField()){
//获取用户具体输入的字符串 ，名字起得挺好，因为表单提交过来的是 字符串类型的
String value = item.getString() ;
request.setAttribute(name, value);
}
//对传入的非 简单的字符串进行处理 ，比如说二进制的 图片，电影这些
else{
/**
* 以下三步，主要获取 上传文件的名字
*/
//获取路径名
String value = item.getName();
//索引到最后一个反斜杠
int start = value.lastIndexOf("\\");
//截取 上传文件的 字符串名字，加1是 去掉反斜杠，
String filename = value.substring(start+1);
request.setAttribute(name, filename);
//真正写到磁盘上
//它抛出的异常 用exception 捕捉
//item.write( new File(path,filename) );//第三方提供的
//手动写的
OutputStream out = new FileOutputStream(new File(path,filename));
InputStream in = item.getInputStream();
int length = 0;
byte [] buf = new byte[1024];
System.out.println("获取上传文件的总共的容量："+item.getSize());
// in.read(buf) 每次读到的数据存放在 buf 数组中
while( (length = in.read(buf) ) != -1){
//在 buf 数组中 取出数据 写到 （输出流）磁盘上
out.write(buf, 0, length);
}
in.close();
out.close();
}
}
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
//e.printStackTrace();
}
request.getRequestDispatcher("filedemo.jsp").forward(request, response);
}
}
filedemo.jsp
<%@ 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 'filedemo.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
用户名：${requestScope.usename} <br/>
文件：${requestScope.file1}<br/>
${requestScope.file2}<br/>
<!-- 把上传的图片显示出来 -->
<img alt="go" src="upload/<%= (String)request.getAttribute("file1") %>" />
</body>
</html>
- 结果页面： 以上就是本文的全部内容。
如何从js文件上传问题，怎么解决
- 第一步：新建HTML文件 使用dreamweaver CS6新建一个html文件并保存到桌面，在桌面放一个文件（图片或文本文档），上传测试用。
- 第二步：写入html页面代码文件 在dreamweaver中输入以下页面代码：
<table width="958">
<tr>
<td><pre style="height:2px"> <a href="">文件上传</a>首页 </pre></td>
</tr>
</table>
<h1> <a href="" class="STYLE9">文件上传</a><span class="STYLE7">文件上传</span></h1>
<p> </p>
<div style="width:180px; height:950px; float:left; border: #55AAFF 1px solid">
<p>文件上传 </p>
<br />
<p>上传图片</p>
<form action="doUpload.jsp" method="post" name="form1" enctype="multipart/form-data">
<!-- 类型enctype用multipart/form-data，这样可以把文件中的数据作为流式数据上传，不管是什么文件类型，均可上传。 -->
<input type="file" name="upfile" size="15" />
<input type="submit" value="确定" />
</form>
</div>
注意，这段代码请放在<body>标签内。
3. 第三步：写入css样式代码
在<head>标签内输入以下样式代码：
<style type="text/css">
.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>
用以固定页面样式。 4. 第四步：检测页面样式 用浏览器打开html文件，查看页面样式，然后做修改调整。 5. 第五步：选择文件 点击页面左边的选择文件按钮，选中桌面文件，然后点击打开，在页面上会显示文件名称。 6. 第六步：上传文件 点击确定按钮，即可将文件上传到本地磁盘，上传成功后自动跳转到根目录。
js如何上传文件
js采用File API 来上传文件的。
File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type="file" /> 文件选择控件中选定文件的能力。
File API 简单示例：
<body>
<h1>File API Demo</h1>
<p>
<!-- 用于文件上传的表单元素 -->
<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" action="javascript: uploadAndSubmit();">
<p>Upload File: <input type="file" name="file" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div>Progessing (in Bytes): <span id="bytesRead"></span> / <span id="bytesTotal"></span></div>
</p>
</body>
运行效果：
使用jquery.form.js实现文件上传及进度条前端代码
ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。
需要解释下我的结构，#upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能，#upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面，.progress 是进度条的位置，先让他隐藏加上 hidden 的class，.progress-bar 是进度条的主体，.progress-bar-status 是进度条的文本提醒。
去掉hidden的class，看到的效果是这样的
将上传事件绑定在file的input里面，绑定方式就随意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%';
//上传步骤
$("#myupload").ajaxSubmit({
url: uploadUrl,
type: "POST",
dataType: 'json',
beforeSend: function () {
$(".progress").removeClass("hidden");
progress.width(percentVal);
status.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
progress.width(percentVal);
status.html(percentVal);
console.log(percentVal, position, total);
},
success: function (result) {
percentVal = '100%';
progress.width(percentVal);
status.html(percentVal);
//获取上传文件信息
uploadFileResult.push(result);
$(".upload-file-result").html(result.name);
$("#upload-input-file").val('');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
$(".upload-file-result").empty();
}
});
更多用法可以参考官网。
几种js实现的动态多文件上传
方式一：事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
<p>
<a href='#' onclick='javascript:viewnone(more1)'>添加附件</a>
<div id='more1' style='display:none'>
<input type="file" name="attach1" size="50" onclick='javascript:viewnone(more2)'/>
</div>
<div id='more2' style='display:none'>
<input type="file" name="attach2" size="50"/>
</div>
</p>
<script language="javascript">
function viewnone(e){
e.style.display=(e.style.display=="none")?"":"none";
}
</script>
方式二：这种方式的动态多文件上传是实现了的，很简单的，不说废话看code
<input type="button" name="button" value="添加附件" onclick="addInput()"/>
<input type="button" name="button" value="删除附件" onclick="deleteInput()"/>
<span id="upload"></span>
<script type="text/javascript">
var attachname = "attach";
var i=1;
function addInput(){
if(i>0){
var attach = attachname + i ;
if(createInput(attach))
i=i+1;
}
}
function deleteInput(){
if(i>1){
i=i-1;
if(!removeInput())
i=i+1;
}
}
function createInput(nm){
var aElement=document.createElement("input");
aElement.name=nm;
aElement.id=nm;
aElement.type="file";
aElement.size="50";
if(document.getElementById("upload").appendChild(aElement) == null)
return false;
return true;
}
function removeInput(nm){
var aElement = document.getElementById("upload");
if(aElement.removeChild(aElement.lastChild) == null)
return false;
return true;
}
</script>
方式三：动态多文件上传，只是在oFileInput.click();这个地方，这样做就不能上传这个文件了，因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧！
另外还有一点就是说，click()只有在ie中才能正常运行。 虽说这种方式最终没能实现上传，但还是留下来参考，看看是否有人可以真正实现上传。
<a href="javascript:newUpload();">添加附件</a>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tbody id="fileList"></tbody>
</table>
<div id="uploadFiles" style="display:block"></div>
<script language="javascript">
//---新建上传
function newUpload(){
var oFileList = document.getElementById("fileList");
var fileCount = oFileList.childNodes.length + 1;
var oFileInput = newFileInput("upfile_" + fileCount);
if(selectFile(oFileInput)){
addFile(oFileInput);
}
}
//----选择文件
function selectFile(oFileInput){
var oUploadFiles = document.getElementById("uploadFiles");
oUploadFiles.appendChild(oFileInput);
oFileInput.focus();
oFileInput.click();//不能这样做，可能是为了安全着想吧！
var fileValue = oFileInput.value;
if(fileValue == ""){
oUploadFiles.removeChild(oFileInput);
return false;
} else {
return true;
}
}
//---新建一个文件显示列表
function addFile(oFileInput){
var oFileList = document.getElementById("fileList");
var fileIndex = oFileList.childNodes.length + 1;
var oTR = document.createElement("tr");
var oTD1 = document.createElement("td");
var oTD2 = document.createElement("td");
oTR.setAttribute("id","file_" + fileIndex);
oTR.setAttribute("bgcolor","#FFFFFF");
oTD1.setAttribute("width","6%");
oTD2.setAttribute("width","94%");
oTD2.setAttribute("align","left");
oTD2.innerText = oFileInput.value;
oTD1.innerHTML = '<a href="javascript:removeFile('+ fileIndex + ');">删除</a>';
oTR.appendChild(oTD1);
oTR.appendChild(oTD2);
oFileList.appendChild(oTR);
}
//---移除上传的文件
function removeFile(fileIndex){
var oFileInput = document.getElementById("upfile_" + fileIndex);
var oTR = document.getElementById("file_" + fileIndex);
uploadFiles.removeChild(oFileInput);
fileList.removeChild(oTR);
}
//---创建一个file input对象并返回
function newFileInput(_name){
var oFileInput = document.createElement("input");
oFileInput.type = "file";
oFileInput.id = _name;
oFileInput.name = _name;
oFileInput.size="50";
return oFileInput;
}
</script>
原生js实现文件上传
function saveUser() {
var file = document.getElementById("file").files[0];
//原生ajax实现文件上传
var formData = new FormData();
if (file) {
formData.append("file", file);
console.log(file);
}
//得到xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", "", true); //设置提交方式，url，异步提交
xhr.onload = function () {
var data = xhr.responseText; //得到返回值
console.log(data);
}
xhr.send(formData);
}
