當前位置：首頁 » 網頁前端 » 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