webuploader圖片上傳

1. webuploader怎麼實現上傳

使用webuploader

點擊上傳按鈕，或者復制粘貼或者拖拉圖片導下面區域里都可以上傳圖片

點擊上傳，java代碼。 servlet里的攜乎簡滑dopost方法

點擊上傳後，圖片會存入你辯咐悉寫入的文件夾里

需要注意的是，需要修改js文件請求後台的路徑

前段代碼如下，需要源碼的可以回復。

2. 使用webuploader插件上傳圖片時如果正確 限制上傳數量

你要理解fileNumLimit的含義。fileNumLimit=總文件數-已經上傳的文件數。這就意味著你fileNumLimit設置為5的話，一次上傳6張是不行的，但是每次上傳1張，就能突破5張的限制。原因是插件在上傳完一個文件後，會把計數清零。你可以參考修改下面的代碼：

uploader.on('fileQueued',function(){
count++;
});

uploader.on('fileDequeued',function(){
count--;
});

uploader.on('uploadFinished',function(){
//注銷這段代碼就可以了count=0;
});

上面的代碼位於webuploader.js的L3809

3. 你好，我用webuploader.html5only.min.js實現批量圖片上傳，我該怎麼在action中獲取上傳的那些文件呢

1.1 分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
1.2 預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
1.3 多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
1.4 HTML5 & FLASH
兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
1.5 MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
1.6 易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。
2、引入資源
2.1 下載包內容

├── Uploader.swf // SWF文件，當使用Flash運行時需要引入。

├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本

├── webuploader.flashonly.js // 只有Flash實現的版本。
├── webuploader.flashonly.min.js // min版本

├── webuploader.html5only.js // 只有Html5實現的版本。
├── webuploader.html5only.min.js // min版本

├── webuploader.withoutimage.js // 去除圖片處理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本

2.2 或者直接使用由staticfile提供的cdn版本，或者下載Git項目包。

// SWF文件，當使用Flash運行時需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf

// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js

// 只有Flash實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js

// 只有Html5實現的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js

// 去除圖片處理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js

2.3 DIY打包
WebUploader文件打包藉助了Grunt工具來實現
2.3.1 環境依賴
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)

2.3.2 編譯代碼
1.克隆 webuploader git倉庫，git clone https://github.com/fex-team/webuploader.git。
2.安裝node依賴，npm install。
3.執行grunt dist，此動作會在dist目錄下面創建合並版本的js, 包括通過uglify壓縮的min版本。

2.3.3 配置
打開webuploader倉庫根目錄下面的Gruntfile.js文件, 代碼合並有buildtask來完成。找到build配置項。
Gruntfile.js已經配置了一個自定義合並的demo. 打包只支持HTML5的版本

// 自己配置的實例
// glob語法。
custom: {
preset: "custom",
cwd: "src",
src: [
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: "dist/webuploader.custom.js"
}

3、angular指令——<web-uploader>
3.1 指令功能
添加一個上傳文件按鈕，可以自行配置上傳文件的類型和過濾規則，且在彈出的模態框中進行操作，支持連續上傳，分類選擇上傳
3.2 使用說明
這里只是使用說明，可能會加一些注意事項，具體參數或者變數說明請參看後面
3.2.1 頁面添加一個指令
<web-uploader class="btn btn-info" type="image" accept="accept">uploader</web-uploader>

3.2.2 配置上傳類型和過濾規則
上傳類型
type有四種類型，分別為
image：圖片
video：音視頻
flash：flash
file：辦公文檔，壓縮文件等等
過濾規則
accept有四個對象屬性，屬性中包含標題、允許文件後綴、允許的mimetype
3.2.3 指令中綁定彈出模態框的事件
web-uploader這個指令中其實只做了一件事，給元素本身綁定彈出模態框的事件，具體上傳文件是在模態框中完成的
3.2.4 初始化uploader類，配置相關屬性
在模態框控制器中用到了$timeout
$timeout(function(){
//這里是上傳配置代碼
},0)

因為配置uploader時需要事先准備好dom元素，angular打開模態框是非同步而JavaScript是單線程，所以實際上在執行模態框控制器中的代碼時，模態框並沒有打開，也就是dom並沒有載入完成，這會導致WebUploader報a.runningtime is not a function...的錯誤
3.3 指令詳細說明
3.3.1 父級controller中的配置

.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允許上傳的類型 圖片/音視頻/flash/文件
$scope.accept = {
//圖片
image: {
title : 'Images',//標題
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允許上傳文件的後綴
mimeTypes : 'image/*'//允許的mimetype
},
//音視頻
video: {
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
},
//flash
flash: {
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
},
//辦公文檔，壓縮文件等等
file: {
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats- officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms- excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
}
};

}])

3.3.2 指令web-uploader

.directive('webUploader', ['$modal', function($modal){
return{
restrict: 'AE',
scope: {
accept: '=accept'
},
link: function($scope, $element, $attr){

$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
return {
accept: $scope.accept,
type: $attr.type
};
}
}
});
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);

4. webuploader怎麼只能上傳一個文件

使用webuploader

點擊譽喊猛傳按鈕或者復制粘貼或者拖拉圖片導面區域都傳圖片

點擊傳java代碼慶橋 servletdopost

點擊傳圖片存入寫入文件夾

需要注意需要修滲此改js文件請求台路徑

前段代碼需要源碼復

5. asp.net mvc 上傳圖片 webuploader

先分析原因。
你出現這個錯誤是因為你沒有了解ASP.NET的工作原理。ASP.Net 和php，jsp ，asp等伺服器語言一樣 都是為了生成可供瀏覽器解析的頁面，而可供跡則消瀏覽器解析的語言只有HTML。

1，如果你在aspx頁面中插入一個asp:LinkButton 那麼運行頁面後 在瀏覽器中查看源代碼你會發現這個標簽實際被轉為了一個<a>標簽。
2，為什麼你的寫法不會轉換呢？因為首先 傳遞給Literal1.Text 的值在asp.net中作為一段字元串被直接輸出到瀏覽器中。那麼你的寫法到瀏覽器後源代碼中仍然是一個asp:LinkButton 標簽，而這個標簽是無法被瀏覽器正確解析的。

解決辦法：
知道了原因，那麼如果非要按照你的寫法去寫，那麼應該是這樣的：
Literal1.Text = "姿知<li>" + ((users)Session["users"]).Name.ToString() + "</li><li> </li><li><a ID='LinkButton1' onclick='LinkButton1_Click1'>注銷</a></li><li> </li><li>信息修改</li><li> </li>";
但是當你修改完後發現點擊注銷按鈕依然不能執行！為什麼呢？
因為你的LinkButton1_Click1 事件並沒有在asp.net中被解析為可供瀏覽器識別的js代碼。

如何解決？

在aspx頁面中寫一個asp:LinkButton按鈕：
<asp:LinkButton ID='LinkButton2' runat='server' onclick='LinkButton1_Click1'>注銷</asp:LinkButton>

運行頁面，查看源代碼 看看這個新加的注銷按鈕被解析為了什麼html代碼，大概如下
<a id="LinkButton2" onclick="xxxxx"></a>

將新加的linkbutton 設置不可見屬性
<asp:LinkButton ID='LinkButton2' runat='server' visible="false" onclick='LinkButton1_Click1'>注銷</asp:LinkButton>

重新修改後台代碼
Literal1.Text = "<li>" + ((users)Session["users"]).Name.ToString() + "</li><li> </li><li><a ID='LinkButton1' onclick='xxxxx'>注銷</a></li><li> </li><li>信息修改</li><li> </li>";
//也就是將標簽的js事件綁定到那個隱藏的盯困注銷按鈕事件上。
希望對你有幫助

6. 百度上傳控制項webuploader如何限制 圖片尺寸大小

可以通過mimeTypes判斷圖片類型，fileNumLimit: xx,//上傳數量限制，fileSizeLimit: xx,//限制上傳所有文件大小，fileSingleSizeLimit: xx,//限制上傳單個文件大小

accept:{//只允許選擇圖片文件格式
title:'Images',
extensions:'gif,jpg,bmp,png',
mimeTypes:'image/*'
},
/**
*驗證文件格式以及文件大小
*/
uploader.on("error",function(type){
if(type=="Q_TYPE_DENIED"){
layer.msg("請上傳JPG、PNG、GIF、BMP格式文件");
}elseif(type=="Q_EXCEED_SIZE_LIMIT"){
layer.msg("文件大小不能超過2M");
}else{
layer.msg("上傳出錯！請檢查後重新上傳！錯誤代碼"+type);
}
});

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

8. 使用webuploader插件上傳圖片時如果正確 限制上傳數量

php.ini:upload_max_filesize 所上傳的文件的最大大小。默認值2M。

9. vue移動端圖片上傳，可最多上傳9張,使用webuploader插件

圖片上傳WebUploader.js

10. webuploader上傳圖片報F_EXCEED_SIZE錯誤，是什麼原因

當冊賀validate不通過時，會以派送錯誤事件的形式通知調用者。通過upload.on('error', handler)可以捕獲到此類錯誤，目前有以下錯誤會在特州慎派定的情況下派送錯來。
Q_EXCEED_NUM_LIMIT 在設置了fileNumLimit且嘗試給uploader添加的文件數量超出這個值時派送。
Q_EXCEED_SIZE_LIMIT 在設置了Q_EXCEED_SIZE_LIMIT且嘗試給uploader添加孝答的文件總大小超出這個值時派送。
Q_TYPE_DENIED 當文件類型不滿足時觸發。。
應該是你的upload.js中fileSingleSizeLimit參數設置過小，你可以修改大一點試試
具體參見http://fex..com/webuploader/doc/index.html