當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webuploader java版本

發布時間：2024/8/1 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 webuploader java版本小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

網上一些webuploader上傳的資料，有php版和java版本的，做了一下整合，現分享以下成果，可以討論，不喜勿碰。說一下過程。

第一步：下載地址，提供官網地址

http://fex.baidu.com/webuploader/

第二步：示例頁面關鍵代碼

html頁面

第三步：diyUpload,封裝了webuploader的自有js

?diyUpload.js，在此感謝“黑同學”

/*?
*?? ?jQuery文件上傳插件,封裝UI,上傳處理操作采用Baidu WebUploader;
*/
(function( $ ) {
?? ?
? ? $.fn.extend({
?? ??? ?/*
?? ??? ?*?? ?上傳方法 opt為參數配置;
?? ??? ?*?? ?serverCallBack回調函數每個文件上傳至服務端后,服務端返回參數,無論成功失敗都會調用參數為服務器返回信息;
?? ??? ?*/
? ? ? ? diyUpload:function( opt, serverCallBack ) {
??? ??? ??? ?if ( typeof opt != "object" ) {
?? ??? ??? ??? ?alert('參數錯誤!');
?? ??? ??? ??? ?return;?? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?var $fileInput = $(this);
?? ??? ??? ?var $fileInputId = $fileInput.attr('id');
?? ??? ??? ?
?? ??? ??? ?//組裝參數;
?? ??? ??? ?if( opt.url ) {
?? ??? ??? ??? ?opt.server = opt.url;?
?? ??? ??? ??? ?delete opt.url;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if( opt.success ) {
?? ??? ??? ??? ?var successCallBack = opt.success;
?? ??? ??? ??? ?delete opt.success;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?if( opt.error ) {
?? ??? ??? ??? ?var errorCallBack = opt.error;
?? ??? ??? ??? ?delete opt.error;
?? ??? ??? ?}
?? ??? ??? ?//迭代出默認配置
?? ??? ??? ?$.each( getOption( '#'+$fileInputId ),function( key, value ){
?? ??? ??? ??? ??? ?opt[ key ] = opt[ key ] || value;?
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?if ( opt.buttonText ) {
?? ??? ??? ??? ?opt['pick']['label'] = opt.buttonText;
?? ??? ??? ??? ?delete opt.buttonText;?? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?var webUploader = getUploader( opt );
?? ??? ??? ?
?? ??? ??? ?if ( !WebUploader.Uploader.support() ) {
?? ??? ??? ??? ?alert( ' 上傳組件不支持您的瀏覽器！');
?? ??? ??? ??? ?return false;
? ? ? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//綁定文件加入隊列事件;
?? ??? ??? ?webUploader.on('fileQueued', function( file ) {
?? ??? ??? ??? ?createBox( $fileInput, file ,webUploader);
?? ??? ??? ?
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?//進度條事件
?? ??? ??? ?webUploader.on('uploadProgress',function( file, percentage ?){
?? ??? ??? ??? ?var $fileBox = $('#fileBox_'+file.id);
?? ??? ??? ??? ?var $diyBar = $fileBox.find('.diyBar');?? ?
?? ??? ??? ??? ?$diyBar.show();
?? ??? ??? ??? ?percentage = percentage*100;
?? ??? ??? ??? ?showDiyProgress( percentage.toFixed(2), $diyBar);
?? ??? ??? ??? ?
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?//全部上傳結束后觸發;
?? ??? ??? ?webUploader.on('uploadFinished', function(){
?? ??? ??? ??? ?$fileInput.next('.parentFileBox').children('.diyButton').remove();
?? ??? ??? ?});
?? ??? ??? ?//綁定發送至服務端返回后觸發事件;
?? ??? ??? ?webUploader.on('uploadAccept', function( object ,data ){
?? ??? ??? ??? ?if ( serverCallBack ) serverCallBack( data );
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?//上傳成功后觸發事件;
?? ??? ??? ?webUploader.on('uploadSuccess',function( file, response ){
?? ??? ??? ??? ?var $fileBox = $('#fileBox_'+file.id);
?? ??? ??? ??? ?var $diyBar = $fileBox.find('.diyBar');?? ?
?? ??? ??? ??? ?$fileBox.removeClass('diyUploadHover');
?? ??? ??? ??? ?$diyBar.fadeOut( 1000 ,function(){
?? ??? ??? ??? ??? ?$fileBox.children('.diySuccess').show();
?? ??? ??? ??? ?});
?? ??? ??? ??? ?if ( successCallBack ) {
?? ??? ??? ??? ??? ?successCallBack( response );
?? ??? ??? ??? ?}?? ?
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?//上傳失敗后觸發事件;
?? ??? ??? ?webUploader.on('uploadError',function( file, reason ){
?? ??? ??? ??? ?var $fileBox = $('#fileBox_'+file.id);
?? ??? ??? ??? ?var $diyBar = $fileBox.find('.diyBar');?? ?
?? ??? ??? ??? ?showDiyProgress( 0, $diyBar , '上傳失敗!' );
?? ??? ??? ??? ?var err = '上傳失敗! 文件:'+file.name+' 錯誤碼:'+reason;
?? ??? ??? ??? ?if ( errorCallBack ) {
?? ??? ??? ??? ??? ?errorCallBack( err );
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?//選擇文件錯誤觸發事件;
?? ??? ??? ?webUploader.on('error', function( code ) {
?? ??? ??? ??? ?var text = '';
?? ??? ??? ??? ?switch( code ) {
?? ??? ??? ??? ??? ?case ?'F_DUPLICATE' : text = '該文件已經被選擇了!' ;
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case ?'Q_EXCEED_NUM_LIMIT' : text = '上傳文件數量超過限制!' ;
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case ?'F_EXCEED_SIZE' : text = '文件大小超過限制!';
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case ?'Q_EXCEED_SIZE_LIMIT' : text = '所有文件總大小超過限制!';
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?case 'Q_TYPE_DENIED' : text = '文件類型不正確或者是空文件!';
?? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?default : text = '未知錯誤!';
??? ??? ??? ??? ??? ?break;?? ?
?? ??? ??? ??? ?}
? ? ? ? ? ? ?? ?alert( text );
? ? ? ? ?? ?});
? ? ? ? }
? ? });
?? ?
?? ?//Web Uploader默認配置;
?? ?function getOption(objId) {
?? ??? ?/*
?? ??? ?*?? ?配置文件同webUploader一致,這里只給出默認配置.
?? ??? ?*?? ?具體參照:http://fex.baidu.com/webuploader/doc/index.html
?? ??? ?*/
?? ??? ?return {
?? ??? ??? ?//按鈕容器;
?? ??? ??? ?pick:{
?? ??? ??? ??? ?id:objId,
?? ??? ??? ??? ?label:"點擊選擇圖片"
?? ??? ??? ?},
?? ??? ??? ?//類型限制;
?? ??? ??? ?accept:{
?? ??? ??? ??? ?title:"Images",
?? ??? ??? ??? ?extensions:"gif,jpg,jpeg,bmp,png",
?? ??? ??? ??? ?mimeTypes:"image/*"
?? ??? ??? ?},
?? ??? ??? ?//配置生成縮略圖的選項
?? ??? ??? ?thumb:{
?? ??? ??? ??? ?width:170,
?? ??? ??? ??? ?height:150,
?? ??? ??? ??? ?// 圖片質量，只有type為`image/jpeg`的時候才有效。
?? ??? ??? ??? ?quality:70,
?? ??? ??? ??? ?// 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
?? ??? ??? ??? ?allowMagnify:false,
?? ??? ??? ??? ?// 是否允許裁剪。
?? ??? ??? ??? ?crop:true,
?? ??? ??? ??? ?// 為空的話則保留原有圖片格式。
?? ??? ??? ??? ?// 否則強制轉換成指定的類型。
?? ??? ??? ??? ?type:"image/jpeg"
?? ??? ??? ?},
?? ??? ??? ?//文件上傳方式
?? ??? ??? ?method:"POST",
?? ??? ??? ?//服務器地址;
?? ??? ??? ?server:"",
?? ??? ??? ?//是否已二進制的流的方式發送文件，這樣整個上傳內容php://input都為文件內容
?? ??? ??? ?sendAsBinary:false,
?? ??? ??? ?// 開起分片上傳。 thinkphp的上傳類測試分片無效,圖片丟失;
?? ??? ??? ?chunked:true,
?? ??? ??? ?// 分片大小
?? ??? ??? ?chunkSize:512 * 1024,
?? ??? ??? ?//最大上傳的文件數量, 總文件大小,單個文件大小(單位字節);
?? ??? ??? ?fileNumLimit:1,
?? ??? ??? ?fileSizeLimit:500 * 1024,
?? ??? ??? ?fileSingleSizeLimit:500 * 1024
?? ??? ?};
?? ?}
?? ?
?? ?//實例化Web Uploader
?? ?function getUploader( opt ) {

?? ??? ?return new WebUploader.Uploader( opt );
?? ?}
?? ?
?? ?//操作進度條;
?? ?function showDiyProgress( progress, $diyBar, text ) {
?? ??? ?
?? ??? ?if ( progress >= 100 ) {
?? ??? ??? ?progress = progress + '%';
?? ??? ??? ?text = text || '上傳完成';
?? ??? ?} else {
?? ??? ??? ?progress = progress + '%';
?? ??? ??? ?text = text || progress;
?? ??? ?}
?? ??? ?
?? ??? ?var $diyProgress = $diyBar.find('.diyProgress');
?? ??? ?var $diyProgressText = $diyBar.find('.diyProgressText');
?? ??? ?$diyProgress.width( progress );
?? ??? ?$diyProgressText.text( text );
?? ?
?? ?}
?? ?
?? ?//取消事件;?? ?
?? ?function removeLi ( $li ,file_id ,webUploader) {
?? ??? ?webUploader.removeFile( file_id );
?? ??? ?if ( $li.siblings('li').length <= 0 ) {
?? ??? ??? ?$li.parents('.parentFileBox').remove();
?? ??? ?} else {
?? ??? ??? ?$li.remove();
?? ??? ?}
?? ??? ?
?? ?}
?? ?
?? ?//創建文件操作div;?? ?
?? ?function createBox( $fileInput, file, webUploader ) {

?? ??? ?var file_id = file.id;
?? ??? ?var $parentFileBox = $fileInput.next('.parentFileBox');
?? ??? ?
?? ??? ?//添加父系容器;
?? ??? ?if ( $parentFileBox.length <= 0 ) {
?? ??? ??? ?
?? ??? ??? ?var div = '<div class="parentFileBox"> \
?? ??? ??? ??? ??? ??? ?<ul class="fileBoxUl"></ul>\
?? ??? ??? ??? ??? ?</div>';
?? ??? ??? ?$fileInput.after( div );
?? ??? ??? ?$parentFileBox = $fileInput.next('.parentFileBox');
?? ??? ?
?? ??? ?}
?? ??? ?
?? ??? ?//創建按鈕
?? ??? ?if ( $parentFileBox.find('.diyButton').length <= 0 ) {
?? ??? ??? ?
?? ??? ??? ?var div = '<div class="diyButton"> \
?? ??? ??? ??? ??? ??? ?<a class="diyStart" href="javascript:void(0)">上傳</a> \
?? ??? ??? ??? ??? ??? ?<a class="diyCancelAll" href="javascript:void(0)">取消</a> \
?? ??? ??? ??? ??? ?</div>';
?? ??? ??? ?$parentFileBox.append( div );
?? ??? ??? ?var $startButton = $parentFileBox.find('.diyStart');
?? ??? ??? ?var $cancelButton = $parentFileBox.find('.diyCancelAll');
?? ??? ??? ?
?? ??? ??? ?//開始上傳,暫停上傳,重新上傳事件;
?? ??? ??? ?var uploadStart = function (){
?? ??? ??? ??? ?webUploader.upload();
?? ??? ??? ??? ?$startButton.text('暫停上傳').one('click',function(){
?? ??? ??? ??? ??? ??? ?webUploader.stop();
?? ??? ??? ??? ??? ??? ?$(this).text('繼續上傳').one('click',function(){
?? ??? ??? ??? ??? ??? ??? ??? ?uploadStart();
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ?});
?? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?//綁定開始上傳按鈕;
?? ??? ??? ?$startButton.one('click',uploadStart);
?? ??? ??? ?
?? ??? ??? ?//綁定取消全部按鈕;
?? ??? ??? ?$cancelButton.bind('click',function(){
?? ??? ??? ??? ?//var fileArr = webUploader.getFiles( 'queued' );
?? ??? ??? ??? ?//修改獲取隊列的方法，不要參數，直接獲取所有隊列
?? ??? ??? ??? ?var fileArr = webUploader.getFiles();
?? ??? ??? ??? ?$.each( fileArr ,function( i, v ){
?? ??? ??? ??? ??? ?removeLi( $('#fileBox_'+v.id), v.id, webUploader );
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ??? ?
?? ??? ?}
?? ??? ??? ?
?? ??? ?//添加子容器;
?? ??? ?var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \
?? ??? ??? ??? ??? ?<div class="viewThumb"></div> \
?? ??? ??? ??? ??? ?<div class="diyCancel"></div> \
?? ??? ??? ??? ??? ?<div class="diySuccess"></div> \
?? ??? ??? ??? ??? ?<div class="diyFileName">'+file.name+'</div>\
?? ??? ??? ??? ??? ?<div class="diyBar"> \
?? ??? ??? ??? ??? ??? ??? ?<div class="diyProgress"></div> \
?? ??? ??? ??? ??? ??? ??? ?<div class="diyProgressText">0%</div> \
?? ??? ??? ??? ??? ?</div> \
?? ??? ??? ??? ?</li>';
?? ??? ??? ??? ?
?? ??? ?$parentFileBox.children('.fileBoxUl').append( li );
?? ??? ?
?? ??? ?//父容器寬度;
?? ??? ?var $width = $('.fileBoxUl>li').length * 180;
?? ??? ?var $maxWidth = $fileInput.parent().width();
?? ??? ?$width = $maxWidth > $width ? $width : $maxWidth;
?? ??? ?$parentFileBox.width( $width );
?? ??? ?
?? ??? ?var $fileBox = $parentFileBox.find('#fileBox_'+file_id);

?? ??? ?//綁定取消事件;
?? ??? ?var $diyCancel = $fileBox.children('.diyCancel').one('click',function(){
?? ??? ??? ?removeLi( $(this).parent('li'), file_id, webUploader );?? ?
?? ??? ?});
?? ??? ?
?? ??? ?if ( file.type.split("/")[0] != 'image' ) {
?? ??? ??? ?var liClassName = getFileTypeClassName( file.name.split(".").pop() );
?? ??? ??? ?$fileBox.addClass(liClassName);
?? ??? ??? ?return;?? ?
?? ??? ?}
?? ??? ?
?? ??? ?//生成預覽縮略圖;
?? ??? ?webUploader.makeThumb( file, function( error, dataSrc ) {
?? ??? ??? ?if ( !error ) {?? ?
?? ??? ??? ??? ?$fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >');
?? ??? ??? ?}
?? ??? ?});?? ?
?? ?}
?? ?
?? ?//獲取文件類型;
?? ?function getFileTypeClassName ( type ) {
?? ??? ?var fileType = {};
?? ??? ?var suffix = '_diy_bg';
?? ??? ?fileType['pdf'] = 'pdf';
?? ??? ?fileType['zip'] = 'zip';
?? ??? ?fileType['rar'] = 'rar';
?? ??? ?fileType['csv'] = 'csv';
?? ??? ?fileType['doc'] = 'doc';
?? ??? ?fileType['xls'] = 'xls';
?? ??? ?fileType['xlsx'] = 'xls';
?? ??? ?fileType['txt'] = 'txt';
?? ??? ?fileType = fileType[type] || 'txt';
?? ??? ?return ?? ?fileType+suffix;
?? ?}
?? ?
})( jQuery );

? ? ? ? ? ? //綁定取消全部按鈕;
?? ??? ??? ?$cancelButton.bind('click',function(){
?? ??? ??? ??? ?//var fileArr = webUploader.getFiles( 'queued' );
?? ??? ??? ??? ?//修改獲取隊列的方法，不要參數，直接獲取所有隊列
?? ??? ??? ??? ?var fileArr = webUploader.getFiles();
?? ??? ??? ??? ?$.each( fileArr ,function( i, v ){
?? ??? ??? ??? ??? ?removeLi( $('#fileBox_'+v.id), v.id, webUploader );
?? ??? ??? ??? ?});
?? ??? ??? ?});

第四步：調用divupload.js,給test的div綁定事件

第五步：java后臺調用controler

@RequestMapping(value = "/imgupload")
?? ?public void imgupload(HttpServletRequest request,
?? ??? ??? ?HttpServletResponse response) throws IllegalStateException, IOException
?? ?{
? ? ? ? String info = request.getParameter("query");
? ? ? ? JSONObject JInfo = JSONObject.fromObject(info);

? ? ? ? //imgs_path是img的實際保存路徑
? ? ? ? JInfo.element("imgs_path", imgs_path);

? ? ? ? //xuni_imgs_path是img的虛擬路徑，此處參考tomcat虛擬路徑的設置
? ? ? ? JInfo.element("xuni_imgs_path", xuni_imgs_path);
? ? ??
? ? ? ? int val = fileServcie.uploadImgs(request, JInfo);
?? ??? ?
?? ??? ?/*String message = JSONUtils.reMsg(val);
?? ??? ?this.ajax(response, message, AbstractBaseController.JSON);*/
? ? ? ? this.ajax(response, "上傳成功", AbstractBaseController.JSON);
?? ?}

第六步：fileServcie.uploadImgs的上傳方法

public int uploadImgs(HttpServletRequest request, ?
?? ??? ??? ?JSONObject JInfo) throws IllegalStateException, IOException
?? ?{
?? ??? ?int val = 0;
?? ??? ?String imgs_path = JInfo.getString("imgs_path");
?? ??? ?File destFile = new File(imgs_path);
?? ??? ?if(!destFile.exists())
?? ??? ?{
?? ??? ??? ?destFile.mkdirs();
?? ??? ?}
?? ??? ?String tblname = JsonUtil.getJSONStringByKey(JInfo, "tblname");
?? ??? ?CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
? ? ? ? ? ? ? ? request.getSession().getServletContext());
? ? ? ? if(multipartResolver.isMultipart(request))
? ? ? ? {
? ? ? ? ?? ? //將request變成多部分request
? ? ? ? ? ? MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
? ? ? ? ? //獲取multiRequest 中所有的文件名
? ? ? ? ? ? Iterator iter=multiRequest.getFileNames();
? ? ? ? ? ??
? ? ? ? ? ? while(iter.hasNext())
? ? ? ? ? ? {
? ? ? ? ? ? ?? ?MultipartFile file=multiRequest.getFile(iter.next().toString());
? ? ? ? ? ? ?? ?if(file!=null)
? ? ? ? ? ? ?? ?{
? ? ? ? ? ? ?? ??? ?long size = file.getSize();
? ? ? ? ? ? ? ? ?? ?String contentType = file.getContentType();
? ? ? ? ? ? ? ? ?? ?String fileName = file.getOriginalFilename();
? ? ? ? ? ? ? ? ?? ?if(!fileName.equals(""))
? ? ? ? ? ? ? ? ?? ?{
? ? ? ? ? ? ? ? ?? ??? ?fileName = UUID.randomUUID()+fileName;
? ? ? ? ? ? ? ? ?? ??? ?
? ? ? ? ? ? ? ? ?? ??? ?String imgBasepath= imgs_path + fileName;
? ? ? ? ? ? ? ? ?? ??? ?//上傳
?? ? ? ? ? ? ? ? ? ? ? ?file.transferTo(new File(imgBasepath));
?? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?/* if(tblname.equals("ZJKB"))
?? ? ? ? ? ? ? ? ? ? ? ?{
?? ??? ? ? ? ? ? ? ? ? ? ? ?ZywsptZjkb zywsptZjkb = new ZywsptZjkb();
?? ??? ? ? ? ? ? ? ? ? ? ? ?zywsptZjkb.setId(BigDecimal.valueOf(JInfo.getLong("id")));
?? ??? ? ? ? ? ? ? ? ? ? ? ?zywsptZjkb.setSctx(JInfo.getString("xuni_imgs_path")+fileName);
?? ??? ? ? ? ? ? ? ? ? ? ? ?zywsptZjkb.setGxz(JInfo.getString("user"));
?? ??? ? ? ? ? ? ? ? ? ? ? ?zywsptZjkb.setGxsj(new Date());
?? ??? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ? ? ? ? ? ? ? ? ? ? ?val = zywsptZjkbMapper.updateByPrimaryKeySelective(zywsptZjkb);
?? ? ? ? ? ? ? ? ? ? ? ?}*/
? ? ? ? ? ? ? ? ?? ?}
? ? ? ? ? ? ? ? ?? ?
? ? ? ? ? ? ?? ?}
? ? ? ? ? ? }
? ? ? ? }
?? ??? ?return val;
?? ?}

此處使用的是multipartResolver的上傳組件，

在springxml中的配置如下：

<bean id="multipartResolver" ?class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
? ? ? ? <property name="defaultEncoding" value="utf-8"/>
? ? ? ? <property name="maxInMemorySize" value="1073741824"/>
? ? ? ? <property name="maxUploadSize" value="102400000"/>
</bean>

第七步：完成收功。

轉載于:https://my.oschina.net/maojindaoGG/blog/808835

總結

以上是生活随笔為你收集整理的webuploader java版本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：利用MATLAB实现人脸识别GUI程序设
下一篇：数字滤波算法——中值滤波