看了許多，終于自己做了一個。廢話不說，直接上代碼

html部分

<div id="uploader" class="wu-example"><!--用來存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">選擇文件</div><button id="ctlBtn" class="btn btn-default">開始上傳</button></div> </div>

js部分

//初始化Web Uploadervar uploader = WebUploader.create({auto: false, //自動上傳swf: '/css/js/plugins/webuploader/Uploader.swf', // swf文件路徑server: '/xxxx/upload/xxxxx', // 文件接收服務端。pick: '#picker', // 選擇文件的按鈕。可選。accept: { title: 'Files', extensions: 'pdf,doc,docx',mimeTypes: 'application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' +',application/pdf' },fileNumLimit: 10, //最大上傳數量為10fileSingleSizeLimit: 20 * 1024 * 1024, //限制上傳單個文件大小20MfileSizeLimit: 200 * 1024 * 1024, //限制上傳所有文件大小200Mresize: false // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！});//上傳前的判斷處理uploader.on('error', function( type ){if ( type === 'Q_EXCEED_NUM_LIMIT' ) {layer.msg('最多允許上傳10份xxx');} if ( type === 'F_DUPLICATE' ) {layer.msg('xxx重復，不能上傳！');}if (type=="Q_TYPE_DENIED"){layer.msg("請上傳doc、pdf格式文件");}else if(type=="F_EXCEED_SIZE"){layer.msg("文件大小不能超過20M");}});// 當有文件被添加進隊列的時候var $list = $("#uploader");uploader.on( 'fileQueued', function( file ) {$list.append( '<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上傳...</p>' + '<a class="webuploadDelbtn">刪除</a><br/>' +'</div>' );});//點擊開始上傳$("#ctlBtn").on( 'click', function() { uploader.upload(); });// 文件上傳過程中創建進度條實時顯示。uploader.on( 'uploadProgress', function( file, percentage ) {var $li = $( '#'+file.id ),$percent = $li.find('.progress .progress-bar');// 避免重復創建if ( !$percent.length ) {$percent = $('<div class="progress progress-striped active">' +'<div class="progress-bar" role="progressbar" style="width: 0%">' +'</div>' +'</div>').appendTo( $li ).find('.progress-bar');}$li.find('p.state').text('上傳中');$percent.css( 'width', percentage * 100 + '%' );});//文件成功、失敗處理uploader.on( 'uploadSuccess', function( file ) {$( '#'+file.id ).find('p.state').text('已上傳');$( '#'+file.id ).find('a.webuploadDelbtn').remove();});//上傳錯誤uploader.on( 'uploadError', function( file ) {$( '#'+file.id ).find('p.state').text('上傳出錯');});//上傳完成uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').fadeOut();});//刪除$list.on("click", ".webuploadDelbtn", function () {var $ele = $(this);var id = $ele.parent().attr("id");var file = uploader.getFile(id);uploader.removeFile(file,true); }); //刪除時執行的方法uploader.on('fileDequeued', function (file) {$(file.id).remove();$('#'+file.id ).find('span.state').text('已經取消');$('#'+file.id).hide(); console.log("remove"); });

java 后臺

@RequestMapping("/xxx")@ResponseBodypublic void uploaderResumes(@RequestParam("file") MultipartFile file, HttpServletRequest request) { // 判斷文件是否為空 if (!file.isEmpty()) { try { // 文件保存路徑 String filePath = request.getSession().getServletContext().getRealPath("/") + "upload" + System.getProperty("file.separator") + file.getOriginalFilename(); // 轉存文件 file.transferTo(new File(filePath)); } catch (Exception e) { e.printStackTrace(); } } }

圖片

總結

以上是生活随笔為你收集整理的Web uploader上传word，pdf实例的全部內容，希望文章能夠幫你解決所遇到的問題。

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