webupload上傳
Ⅰ webuploader在安卓微信環境上傳為什麼不能多選
引入資源 使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夾/悉弊webuploader/server/fileupload/server/fileupload.php', // 選擇文件的按鈕。 可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允許選擇圖片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); 監聽fileQueued事件，通過uploader.makeThumb來創建圖片預覽圖。 PS: 這里得到的是Data URL數據，IE6、IE7不支持直接預覽。可以藉助FLASH或者服務端來完成預覽。 // 當有文件添加進碼陸者來的時候 uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list為容器jQuery實例 $list.append( $li ); // 創建縮略圖 // 如果為非圖片文件，可以不用調用此方法。 // thumbnailWidth x thumbnailHeight 為 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); 然後剩下的就是上傳狀態提示了，當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress,uploadSuccess, uploadError, uploadComplete事件。 // 文件上傳過程中創建進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重復創建 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done'); }); // 文件上傳失敗，顯示上傳出錯。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重復創建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上傳失敗'); }); // 完成上傳完了，成功或者失敗，先遲薯刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); 以上所述是小編給大家介紹的使用Web Uploader實現多文件上傳的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
Ⅱ 用webuploader怎麼解決跨域上傳文件的問題
跨域請求前瀏覽器會自動發出一個options請求，如果伺服器的響應頭部中有如下信息：
Access-Control-Allow-Origin: #允許訪談亂睜問的源，如http://localhost:3000
Access-Control-Allow-Methods: #允許的方法，如含歲get, post
瀏覽器收到這個陪鬧響應就會繼續原來的請求，否則就會終止。
在webuploader中可以在uploadBeforeSend的回調中設置請求的頭部，例如
uploader.on('uploadBeforeSend', function(obj, data, headers) {
_.extend(headers, {
"Origin": "http://localhost:3000",
"Access-Control-Request-Method": "POST"
});
});
在服務端的post響應中增加頭部：Access-Control-Allow-Origin: http://localhost:3000
Ⅲ vuewebuploader多文件上傳變慢
vuewebuploader多文件上傳變慢是察擾埋nginx配置的問題。解決方法：
1、將路由改為懶載入，修改router文件。
2、將ip修改成localhost，修改的前提是前後端的項目是放在同一個服務李野器。
3、修敗螞改後會發現文件上傳完後，上下行流量沒有進行轉換，上傳的速度也大大提成。
Ⅳ 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分片上傳大文件
Ⅳ webuploader 怎麼實現多文件上傳
和普通的上傳請求一樣，你可以使用commons-upload來解析請求，spring的話可以通過action的註解參數來獲取上傳的文件，jfinal可以用getFile()方法來獲取。
如果你想簡單，可以以位元組流的形式發送文件，webuploder有個參數sendAsBinary ，將其設置為true，這樣你java後端用request.getInputStream()即可獲取文件的位元組流，文件名等參數你可以通過request.getParameter()方法獲得。推薦你這么做，最簡單的方式。
Ⅵ webuploader怎麼實現上傳
使用webuploader
點擊上傳按鈕，或者復制粘貼或者拖拉圖片導下面區域里都可以上傳圖片
點擊上傳，java代碼。 servlet里的攜乎簡滑dopost方法
點擊上傳後，圖片會存入你辯咐悉寫入的文件夾里
需要注意的是，需要修改js文件請求後台的路徑
前段代碼如下，需要源碼的可以回復。
Ⅶ 上傳控制項 WebUploader 判斷有沒有上傳成功
在認為成功前會派送一個事件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對於後端返回的數據格式是沒有要求的。
上傳控制項棗輪 WebUploader 判斷有沒有上傳成功凳敬信
三者從本質上來說沒有可比性，
socket則是對TCP/IP協議的封裝和應用(程序員層面上)。
也可以說，TPC/IP協議是傳輸層協議，主要解決數據如何在網路中傳輸，
而HTTP是應用層協議，主要解決如何包裝數據。
關於TCP/IP和HTTP協議的關系，網路有一段比較容易理解的介紹：
「我們在傳輸數據時，可以只使用(傳輸層)TCP/IP協議，但是那樣的話，如果沒有應用層，便無法識別數據內容。
如果想要使傳輸的數據有意義，則必須使用到應用層協議。