当前位置：首页 » 网页前端 » web上传文件的代码
扩展阅读
提分平台的账号密码是什么 2023-08-31 22:07:10
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web上传文件的代码

发布时间: 2022-10-06 22:39:00

A. webuploader分片上传的实现代码（前后端分离）

本文介绍了webuploader分片上传的实现代码（前后端分离），分享给大家，具体如下：
WebUploader是由Bai
WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS
6+,
android
4+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接的解释)
功能描述
1、webuploader是网络研发的上传组件，文档不是特别规整，但是也够用了。
2、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。
3、分片上传已做md5校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。
4、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。
5、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；
显示效果
关键代码前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超时的话，只能认为该分片未上传过
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，则跳过上传
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
实例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'点击选择文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的区域
paste:
'#uploader',
//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上传的个数
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制单个文件的大小
50
M
});
后端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上传之前校验(整个文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校验
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳过",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校验
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳过",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
没有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
当前片
Long
chunks
=
uploadVO.getChunks();//
总共多少片
//
分片目录创建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上传
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上传出错",
e);
return
RETURN.fail("分片上传出错",
1);
}
//
合并分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合并失败：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合并失败",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
删除分片文件夹
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上传成功",
1);
}
else
{
return
RETURN.fail("上传中...",
1);
}
}
/**
*
未分片上传
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上传
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上传目录
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上传成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上传出错",
e);
return
RETURN.fail("文件上传出错",
0);
}
}
return
RETURN.fail("上传失败",
0);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二）webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuery
webuploader分片上传大文件

B. web程序中如何上传文件

表单上传
这是传统的form表单上传，使用form表单的input[type=”file”]控件，可以打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，它是web开发者最常用的一种文件上传方式。
表单的代码如下：
<form method="post" action="http://uploadUrl" enctype="multipart/form-data">
<input name="file" type="file" accept="image/gif,image.jpg" />
<input name="token" type="hidden" />
<input type="submit" value="提交" />
</form>

C. 求.net怎么实现web端上传超大文件

想要想上传大文件，必须在百web.config文件中进行配置。
在<system.web>节点中添加如下代码即可：
<httpRuntime maxRequestLength="2097151"/>
这个代码就是表示设置最大请求值，上传度文件也就相当于请求。maxRequestLength单位为KB，最大值为：2097151.如果不设置，默认为4096 KB (4 MB)。
也就是说专上传的文件最大可以上传2G以内的文件。
一般没有配置的话，默认只能上传4M以内的文件。配置了的话就可属以上传更大的文件。

D. javaweb中实现文件上传完整代码(servlet里面dopost的代码)

structs
的
jsp
页面文件上传表单,只要项目是SSH的就行了
jsp:
<s:form
action="add.do"
id="inputForm"
enctype="multipart/form-data"
>
<td
>
<s:file
name="upload"
cssClass="{required:true}"
contenteditable="false"></s:file>
<span
class="field_tipinfo">请选择文件</span>
</td>
</s:form
action:
private
File
upload;//上传的文件
....
public
String
add()
throws
Exception
{
//保存文件
save(upload);
}
...

E. 求JAVA WEB项目文件夹上传下载代码

简单谈一下关于文件上传几个步骤
1.创建html页面的submit事件，在input框中type必须要选择filepath，这样子第一步可以选择要传的文件
2.创建fileservlet类，来对该页面做出响应
3.uploadfile类来进行文件上传的逻辑处理，实例文件工厂类对象，然后再从中产生文件对象，来接受上传文件的处理

F. 求浏览器 web 大文件上传源代码

String fid = request.getHeader("id");
String blockIndex = request.getHeader("blockIndex");//基于1
String blockOffset = request.getHeader("blockOffset");//块偏移，相对于整个文件
String blockSize = request.getHeader("blockSize");//块大小（当前需要下载的大小）
String pathSvr = request.getHeader("pathSvr");//文件在服务器的位置
pathSvr = PathTool.url_decode(pathSvr);

if ( StringUtils.isBlank(fid)
||StringUtils.isBlank(blockIndex)
||StringUtils.isEmpty(blockOffset)
||StringUtils.isBlank(blockSize)
||StringUtils.isBlank(pathSvr))
{
response.setStatus(500);
response.setHeader("err","参数为空");
return;
}
File f = new File(pathSvr);
//文件不存在
if(!f.exists())
{
response.setStatus(500);
OutputStream os = response.getOutputStream();
System.out.println(String.format("%s 文件不存在",pathSvr));
os.close();
return;
}
long fileLen = f.length();

response.setContentType("application/x-download");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.addHeader("Content-Length",blockSize);
response.setDateHeader("Expires", 0);

OutputStream os = response.getOutputStream();
try
{
RandomAccessFile raf = new RandomAccessFile(pathSvr,"r");

int readToLen = Integer.parseInt(blockSize);
int readLen = 0;
raf.seek( Long.parseLong(blockOffset) );//定位索引
byte[] data = new byte[1048576];

while( readToLen > 0 )
{
readLen = raf.read(data,0,Math.min(1048576,readToLen) );
readToLen -= readLen;
os.write(data, 0, readLen);

}
os.flush();
os.close();
raf.close();
os = null;
response.flushBuffer();

out.clear();
out = pageContext.pushBody();
}
catch(Exception e)
{
response.setStatus(500);
os.close();
out.close();
e.printStackTrace();
}
finally
{
if(os != null)
{
os.close();
os = null;
}
out.clear();
out = pageContext.pushBody();
}%>

G. 怎样使用javaweb实现上传视频和下载功能

文件上传就是将客户端资源，通过网路传递到服务器端。

因为文件数据比较大，必须通过文件上传才可以完成将数据保存到数据库端的操作。

文件上传的本质就是IO流操作。

演示：文件上传应该如何操作？

浏览器端:
1.method=post 只有post才可以携带大数据
2.必须使用<input type='file' name='f'>要有name属性
3.encType="multipart/form-data"
服务器端:
request对象是用于获取请求信息。
它有一个方法 getInputStream(); 可以获取一个字节输入流，通过这个流，可以读取到
所有的请求正文信息.
文件上传原理:
浏览器端注意上述三件事，在服务器端通过流将数据读取到，在对数据进行解析.
将上传文件内容得到，保存在服务器端，就完成了文件上传。

注意：在实际开发中，不需要我们进行数据解析，完成文件上传。因为我们会使用文件上传的工具，它们已经封装好的，提供API,只要调用它们的API就可以完成文件上传操作.我们使用的commons-fileupload,它是apache提供的一套开源免费的文件上传工具。

代码演示文件上传的原理：

在WebRoot下新建upload1.jsp

[html]view plain

  • <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

  • <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

  • <html>

  • <head>

  • <title>MyJSP'index.jsp'startingpage</title>

  • </head>

  • <body>

  • <!--encType默认是application/x-www-form-urlencoded-->

  • <formaction="${pageContext.request.contextPath}/upload1"

  • method="POST"enctype="multipart/form-data">

  • <inputtype="text"name="content"><br>

  • <inputtype="file"name="f"><br><inputtype="submit"

  • value="上传">

  • </form>

  • </body>

  • </html>

    • 新建Upload1Servlet 路径：/upload1

    [java]view plain

  • packagecn.itcast.web.servlet;

  • importjava.io.IOException;

  • importjava.io.InputStream;

  • importjavax.servlet.ServletException;

  • importjavax.servlet.http.HttpServlet;

  • importjavax.servlet.http.HttpServletRequest;

  • importjavax.servlet.http.HttpServletResponse;

  • {

  • publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

  • throwsServletException,IOException{

  • //System.out.println("upload1servlet......");

  • //通过request获取一个字节输入流，将所有的请求正文信息读取到，打印到控制台

  • InputStreamis=request.getInputStream();

  • byte[]b=newbyte[1024];

  • intlen=-1;

  • while((len=is.read(b))!=-1){

  • System.out.println(newString(b,0,len));

  • }

  • is.close();

  • }

  • publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)

  • throwsServletException,IOException{

  • doGet(request,response);

  • }

  • }

    • 在浏览器端访问信息如下：


    文件上传概述

    实现web开发中的文件上传功能，需要完成如下二步操作：

  • 在web页面中添加上传输入项。

  • 在Servlet中读取上传文件的数据，并保存在服务器硬盘中。

    • 如何在web页面中添加上传输入项？

    <input type="file">标签用于在web页面中添加文件上传输入项，设置文件上传输入项时注意：

  • 1、必须设置input输入项的name属性，否则浏览器将不会发送上传文件的数据。

  • 2、必须把form的encType属性设为multipart/form-data 设置该值后，浏览器在上传文件时，并把文件数据附带在http请求消息体内，并使用MIME协议对上传的文件进行描述，以方便接收方对上传数据进行解析和处理。

  • 3、表单的提交方式要设置为post。

    • 如何在Servlet中读取文件上传数据，并保存到本地硬盘中？

  • Request对象提供了一个getInputStream方法，通过这个方法可以读取到客户端提交过来的数据。但由于用户可能会同时上传多个文件，在servlet端编程直接读取上传数据，并分别解析出相应的文件数据是一项非常麻烦的工作，示例。

  • 为方便用户处理文件上传数据，Apache 开源组织提供了一个用来处理表单文件上传的一个开源组件（ Commons-fileupload ），该组件性能优异，并且其API使用极其简单，可以让开发人员轻松实现web文件上传功能，因此在web开发中实现文件上传功能，通常使用Commons-fileupload组件实现。

  • 使用Commons-fileupload组件实现文件上传，需要导入该组件相应支撑jar包：Commons-fileupload和commons-io。commo-io不属于文件上传组件的开发jar文件，但Commons-fileupload组件从1.1版本开始，它工作时需要commons-io包的支持。

H. html网页上传文件的完整代码

html前端代码：

<html>
<body>
<formaction="upload-file.php"method="post"
enctype="multipart/form-data">
<labelfor="file">文件名:</label>
<inputtype="file"name="file"id="file"/>
<br/>
<inputtype="submit"name="submit"value="提交"/>
</form>
</body>
</html>

如果是ubuntu上部署apache2，你应该是php开发者吧，action="upload-file.php
" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可！

这里提供upload-file.php后端接收文件的代码：

<?php
if($_FILES["file"]["error"]>0)
{
echo"错误:".$_FILES["file"]["error"]."<br/>";
}
else
{
echo"文件名:".$_FILES["file"]["name"]."<br/>";
echo"类型:".$_FILES["file"]["type"]."<br/>";
echo"大小:".($_FILES["file"]["size"]/1024)."Kb<br/>";
}
if(file_exists("upload/".$_FILES["file"]["name"]))
{
echo$_FILES["file"]["name"]."文件已经存在.";
}
else
{
move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/".$_FILES["file"]["name"]);
echo"文件已经被存储到:"."upload/".$_FILES["file"]["name"];
}
?>

代码很简单，我相信你应该能看懂，这里的 文件夹 upload/ 需要你自己手动创建，请确保文件路径正取！


我也是web开发者，有问题可继续追问我！或是加我工作室QQ(540144097)，在群里向我提问！有问必答，望采纳......

I. 求webuploader web 大文件上传源代码

if(request.getHeader("content-type")!=null&&"application/x-www-form-urlencoded".equals(request.getHeader("content-type"))){ return null;//将请求转换成MultipartHttpServletRequest MultipartHttpServletRequest mRequest=(MultipartHttpServletRequest)request; Enumeration<String> ps = mRequest.getParameterNames(); while(ps.hasMoreElements()){ String hname = ps.nextElement(); System.out.println(hname); System.out.println(mRequest.getParameter(hname)); } //获值 String value= mRequest.getParameter("key"); //获取单个数据的时候，取key值 Iterator<String> fns=mRequest.getFileNames();//获取上传的文件列表 while(fns.hasNext()){ String s =fns.next(); MultipartFile mFile = mRequest.getFile(s); if(mFile.isEmpty()){ map.put("error", "message"); }else{ String basePath=Constant.BASEPICUPLOADPATH; String dPath= Constant.SDF_PARAM.format(new Date()); File dir = new File(basePath+dPath); if(!dir.exists()){ dir.mkdirs(); } String originFileName=mFile.getOriginalFilename(); String suffix=originFileName.split("\\.")[originFileName.split("\\.").length-1]; String base64Name=UUID.randomUUID().toString(); File file = new File(basePath+dPath,base64Name+"."+suffix); try { FileUtils.InputStreamToFile(mFile.getInputStream(),file);//存储文件 } catch (IOException e) { e.printStackTrace(); } } } //最近刚好在做这方面的，希望能解决你的问题

J. javaweb中实现文件上传完整代码(servlet里面dopost的代码)

structs 的 jsp 页面文件上传表单,只要项目是SSH的就行了
jsp:
<s:form action="add.do" id="inputForm" enctype="multipart/form-data" >
<td >
<s:file name="upload" cssClass="{required:true}" contenteditable="false"></s:file>
<span class="field_tipinfo">请选择文件</span>
</td>
</s:form

action:
private File upload;//上传的文件
....
public String add() throws Exception {
//保存文件
save(upload);
}
...

阅读全文

与web上传文件的代码相关的内容

本站内容整理源于互联网，如有问题请联系解决。
Copyright design: www.gotrillian.com since 2022