項目上遇到一個需求,要實現一個頁面有多個上傳圖片入口,我們使用的是webuploader上傳組件;
研究了一下終於弄好了這個功能,主要是動態獲取上傳按鈕id和需要展現縮略圖的元素id獲取元素;保存供以後需要的時候直接用:
1:首先引入所需要的css和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"></script>
2:html代碼:
<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> </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代碼:
<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>