當前位置:首頁 » 網頁前端 » web上傳組件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web上傳組件

發布時間: 2022-05-05 04:32:40

① webuploader 上傳文件 接收端使用什麼語言

和普通的上傳請求一樣,你可以使用commons-upload來解析請求,spring的話可以通過action的註解參數來獲取上傳的文件,jfinal可以用getFile()方法來獲齲 如果你想簡單,可以以位元組流的形式發送文件,webuploder有個參數sendAsBinary ,

② Bai WebUploader上傳組件向伺服器傳id參數問題

上傳成功,返回url就可以了,然後響應的URL在放到input的隱藏域中 進行 下一步操作

③ java web怎麼實現文件上傳到伺服器

/**
* 上傳到本地
* @param uploadFile
* @param request
* @return
*/
@RequestMapping("/upload")
@ResponseBody
public Map<String, Object> uploadApkFile(@RequestParam("uploadUpdateHistoryName") MultipartFile uploadFile,
HttpServletRequest request) {
Map<String, Object> map = new HashMap<>();
// 上傳文件校驗,包括上傳文件是否為空、文件名稱是否為空、文件格式是否為APK。
if (uploadFile == null) {
map.put("error", 1);
map.put("msg", "上傳文件不能為空");
return map;
}
String originalFilename = uploadFile.getOriginalFilename();
if (StringUtils.isEmpty(originalFilename)) {
map.put("error", 1);
map.put("msg", "上傳文件名稱不能為空");
return map;
}
String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
if (extName.toUpperCase().indexOf("APK") < 0) {
map.put("error", 1);
map.put("msg", "上傳文件格式必須為APK");
return map;
}

String path = request.getSession().getServletContext().getRealPath("upload");
String fileName = uploadFile.getOriginalFilename();
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
// 保存
String downLoadUrl = null;
try {
uploadFile.transferTo(targetFile);
downLoadUrl = request.getContextPath() + "/upload/" + fileName;
map.put("error", 0);
map.put("downLoadUrl", downLoadUrl);
map.put("msg", "上傳文件成功");
return map;
} catch (Exception e) {
e.printStackTrace();
map.put("error", 1);
map.put("msg", "上傳文件失敗");
return map;
}
}

//上傳文件
$('#btnUpload').bind('click',function(){
// var formdata= $('#uploadForm').serializeJSON();
var formdata = new FormData($( "#uploadForm" )[0]);
$.ajax({
url:"upload.do",
data:formdata,
async: false,
cache: false,
processData:false,
contentType:false,
// dataType:'json',
type:'post',
success:function(value){
if(value.error==0){
$('#downLoadUrlId').val(value.downLoadUrl);
$.messager.alert('提示',value.msg);
$('#uploadWindow').window('close');
}else{
$.messager.alert('提示',value.msg);
}
}
});
});

<div id="uploadWindow" class="easyui-window" title="apk上傳"
style="width: 230px;height: 100px" data-options="closed:true">
<form id="uploadForm" enctype="multipart/form-data">
<td><input type ="file" style="width:200px;" name = "uploadUpdateHistoryName"></td>
</form>
<button id="btnUpload" type="button">上傳Apk</button>
</div>

java js html

④ JAVA WEB怎麼實現大文件上傳

解決這種大文件上傳不太可能用web上傳的方式,只有自己開發插件或是當門客戶端上傳,或者用現有的ftp等。
1)開發一個web插件。用於上傳文件。
2)開發一個FTP工具,不用web上傳。
3)用現有的FTP工具。
下面是幾款不錯的插件,你可以試試:
1)Jquery的uploadify插件。具體使用。你可以看幫助文檔。
2)網上有一個Web大文件斷點續傳控制項:http://www.cnblogs.com/xproer/archive/2012/02/17/2355440.html
此控制項支持100G文件的斷點續傳操作,提供了完善的開發文檔,支持文件MD5驗證,支持文件批量上傳。
JavaUploader免費開源的,是用applet實現的,需要簽名才能在瀏覽器上用,支持斷點。缺點是收費。
3)applet也是一種方式,MUPLOAD組件就是以APPLET方式處理的。
如果你不需要訪問用戶的硬碟文件,那你可以使用FTP上傳,也支持斷點。但只要你訪問用戶磁碟,又要支持斷點,那必須要簽名的。不然瀏覽器不知道你的身份。

⑤ 支持WEB上傳和FTP和ASP上傳是什麼意思,區別

web上傳包含了asp上傳,就是通過網頁程序腳本,利用上傳組件例如ASPUP,和上傳控制項例如FSO等,把文件發送至伺服器端。
ftp上傳一般是伺服器管理員給了你一個ftp賬號以及密碼並開通了ftp許可權(讀,寫,執行等),通過瀏覽器或則ftp工具上傳文件。
你要讓你上傳的文件在網頁中顯示,必須知道該文件傳到伺服器之後的所在目錄,在網頁要顯示的部位加上顯示代碼即可。

⑥ 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分片上傳大文件

⑦ JAVA WEB文件上傳步驟

JAVA WEB文件上傳步驟如下:
實現 Web 開發中的文件上傳功能,兩個操作:在 Web 頁面添加上傳輸入項,在 Servlet 中讀取上傳文件的數據並保存在本地硬碟中。
1、Web 端上傳文件。在 Web 頁面中添加上傳輸入項:<input type="file"> 設置文件上傳輸入項時應注意:(1) 必須設置 input 輸入項的 name 屬性,否則瀏覽器將不會發送上傳文件的數據。(2) 必須把 form 的 enctype 屬性設為 multipart/form-data,設置該值後,瀏覽器在上傳文件時,將把文件數據附帶在 http 請求消息體中,並使用 MIME 協議對上傳文件進行描述,以方便接收方對上傳數據進行解析和處理。(3) 表單提交的方式要是 post
2、伺服器端獲取文件。如果提交表單的類型為 multipart/form-data 時,就不能採用傳統方式獲取數據。因為當表單類型為 multipart/form-data 時,瀏覽器會將數據以 MIME 協議的形式進行描述。如果想在伺服器端獲取數據,那麼我們必須採用獲取請求消息輸入流的方式來獲取數據。
3、Apache-Commons-fileupload。為了方便用戶處理上傳數據,Apache 提供了一個用來處理表單文件上傳的開源組建。使用 Commons-fileupload 需要 Commons-io 包的支持。
4、fileuplpad 組建工作流程
(1)客戶端將數據封裝在 request 對象中。
(2)伺服器端獲取到 request 對象。
(3)創建解析器工廠 DiskFileItemFactory 。
(4)創建解析器,將解析器工廠放入解析器構造函數中。之後解析器會對 request 進行解析。
(5)解析器會將每個表單項封裝為各自對應的 FileItem。
(6)判斷代表每個表單項的 FileItem 是否為普通表單項 isFormField,返回 true 為普通表單項。
(7)如果是普通表單項,通過 getFieldName 獲取表單項名,getString 獲得表單項值。
(8)如果 isFormField 返回 false 那麼是用戶要上傳的數據,可以通過 getInputStream 獲取上傳文件的數據。通過getName 可以獲取上傳的文件名。

⑧ 百度上傳組件webuploader 用java怎麼寫服務端

<div id="uploader" class="wu-example">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或將照片拖到這里,單次最多可選300張</p>
</div>
</div>
<div class="statusBar" style="display: none;">
<div class="progress">
<span class="text">0%</span> <span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">開始上傳</div>
</div>
</div>
</div>

<!-- webuploader -->
<link rel="stylesheet" type="text/css"
href="/static/js/webuploader/css.css">
<link rel="stylesheet" type="text/css"
href="/static/js/webuploader/image.css">
<script type="text/javascript" src="/static/js/webuploader/min.js"></script>
<script type="text/javascript"
src="/static/js/webuploader/upload-image.js"></script>

⑨ 上傳控制項 WebUploader 判斷有沒有上傳成功

最近做的一個項目需要圖片批量上傳,研究了一下,終於找到了一個不錯的上傳控制項Web Uploader

WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的FLASH運行時,兼容IE6+,iOS
6+, android 4+。兩套運行時,同樣的調用方式,可供用戶任意選用。
採用大文件分片並發上傳,極大的提高了文件上傳效率。

默認如果啥也不處理,只要有返回數據就認為是成功,就算返回的是錯誤信息,也認為是成功了。

但是,在認為成功前會派送一個事件uploadAccept,這個事件是用來詢問是否上傳成功的。在這個事件中你可以拿到上傳的是哪個文件,以及對應的服務端返回reponse。
//如:上傳成功返回 {"success" :"1"} //如:上傳失敗返回 {"success" :"0"}
uploader.on("uploadAccept", function( file, data){ if (
data.success=="0") { // 通過return false來告訴組件,此文件上傳有錯。 return false; } });
response是個對象,如果伺服器返回是json格式,那麼正和你意,都已經解析好了,如果不是json格式,response._raw裡面可以拿到原始數據。所以,webuploader對於後端返回的數據格式是沒有要求的。