同一個頁面使用webuploader實現多例項多上傳案例
阿新 • • 發佈:2019-01-22
專案上遇到一個需求,要實現一個頁面有多個上傳圖片入口,我們使用的是webuploader上傳元件;研究了一下終於弄好了這個功能,主要是動態獲取上傳按鈕id和需要展現縮圖的元素id獲取元素;儲存供以後需要的時候直接用:1:首先引入所需要的css和js
</div>
<div class="cerDiv">
<p class="cer">使用者頭像:</p>
<div id="logo"></div>
<div class="subBut"><span onClick="webUpload('logo')" class="uploadImg">上傳圖片</span></div>
</div>
<div class="cerDiv">
<p class="cer">學歷證書:</p>
<div id="education"></div>
<div class="subBut"><span onClick="webUpload('education')" class="uploadImg">上傳圖片</span></div>
</div>
</div>3:js程式碼:
<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css"> <script type="text/javascript" src="jQuery/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="webuploader/webuploader.js"2:html程式碼:></script>
<div class="container"> <div class="cerDiv"> <p class="cer">身份證件:</p> <div id="identity"></div> <div class="subBut"><span onClick="webUpload('identity')" class="uploadImg">上傳圖片</span></div>
<script type="text/javascript"> /* --上傳元件開始-- */ var $img; var uploader = WebUploader.create({ // 選完檔案後,是否自動上傳。 auto: true, // swf檔案路徑 swf: '/webuploader/Uploader.swf', server: 'http://public/upload?type=images', // 內部根據當前執行是建立,可能是input元素,也可能是flash. pick: '.uploadImg', duplicate :true,//讓圖片可重複上傳 // 只允許選擇圖片檔案。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, resize:false }); // 檔案上傳成功,給item新增成功class, 用樣式標記上傳成功。 uploader.on('fileQueued', function (file) { var listId = $list.getAttribute("id"); $("#"+listId).append( '<div id="' + file.id + '" class="item" style="position:relative;float:left;">' + '<div class="img" style="height:100px;width:100%;padding:0px;"><img style="width:100%;height:100%" data-id="'+ file.id +'" src=""></div>' + '<h4 class="info">' + file.name + '</h4>' + '<input id="imageId" type="hidden" name="imageId" value="' + file.id + '" />' + '<div class="file-panel" ><a onclick="remove(this);"><i class="fa fa-trash" style=""></i></a></div>'+ '</div>' ); $img = $("#"+ file.id).find('img'); // 建立縮圖 如果為非圖片檔案,可以不用呼叫此方法 100(寬) x 100(高) uploader.makeThumb( file, function( error, src ) { console.log(src); if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr( 'src', src ); }, 100, 100 ); $(".webUpload").val(file.name); }); // 檔案上傳失敗,顯示上傳出錯。 uploader.on('uploadError', function (file) { alert('上傳失敗'); }); // 完成上傳完了,成功或者失敗,先刪除進度條。 uploader.on('uploadComplete', function (file) { console.log(file); // $(".webUpload").removeClass("webUpload"); }); var $list; function webUpload(id) { $list = document.getElementById(id); document.getElementById(id).setAttribute("class","webUpload"); } function remove(ele){ var imgEle = $(ele).parent().parent().find("img"); var imgId = $(imgEle).attr("data-id"); // 移除縮圖並將上傳檔案移出上傳序列 var $li = $('#' + imgId); $li.off().remove(); // 重置uploader,目前只重置了檔案佇列 uploader.reset(); } </script>