WebUploader實現采集圖片的功能
阿新 • • 發佈:2018-06-29
addclass code start mobile 初始化 scrip lock ava gre
項目最開始用百度團隊的文件上傳組件做了個物料照片采集的功能,後來做員工頭像采集時竟然不知道怎麽使用了。
參照官方Demo:
http://fex.baidu.com/webuploader/getting-started.html
前端代碼:
這裏我的模板文件還用到了
<link href="~/Themes/P2Mobile/css/layer.css" rel="stylesheet" />
<script src="~/Themes/P2Mobile/js/layer.js"></script>
<script src="@Url.Content("~/Themes/Mobile/js/jquery-1.10.2.min.js")"></script>
@{ ViewBag.Title = "頭像采集"; Layout = "~/Views/P2Mobile/P2MB_LayoutPage.cshtml"; } <link href="~/Themes/P2Mobile/css/webuploader.css" rel="stylesheet" /> <script src="~/Themes/P2Mobile/js/webuploader.min.js"></script> <script type="text/javascript"> function DeleteImg(fileid) {//頁面層 layer.open({ type: 1 , content: ‘<div class="row list-group"><div class="list-group-item font15" style="text-align:center" id="cp_img_jian" data-picid="‘ + fileid + ‘"><p style="display:inline-block;">刪除</p></div></div>‘ , anim:‘up‘ , style: ‘position:fixed; bottom:0; left:0; width: 100%; height: 40px; padding:10px 0; border:none;color:red;‘ }); } $(document).ready(function () { $(document).on("click", "#cp_img_jian", function () { var pic = document.getElementById("cp_img_jian"); var Id = pic.getAttribute(‘data-picid‘); uploader.removeFile(uploader.getFile(Id, true)); $(‘#‘ + Id).remove(); layer.closeAll(); }); var $list = $(‘#fileList‘), // 優化retina, 在retina下這個值是2 ratio = window.devicePixelRatio || 1, // 縮略圖大小 thumbnailWidth = 400 * ratio, thumbnailHeight = 400 * ratio, serverURL = ‘/FRUBarCodeOtherMobile/FRU_UploadImages?Material=‘, uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自動上傳。 auto: false, // swf文件路徑 swf: ‘../../Themes/P2Mobile/js/Uploader.swf‘, // 文件接收服務端。 server: "/FRUBarCodeOtherMobile/FRU_UploadImages", // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建,可能是input元素,也可能是flash. pick: ‘#filePicker‘, fileNumLimit: 10,//限制上傳最多10張圖片 // 不壓縮image, 默認如果是jpeg,文件上傳前會壓縮一把再上傳! accept: { title: ‘Images‘, extensions: ‘gif,jpg,jpeg,bmp,png‘, mimeTypes: ‘image/*‘ } }); // 當有文件添加進來的時候 uploader.on(‘fileQueued‘, function (file) { var $li = $( ‘<div id="‘ + file.id + ‘" class="file-item thumbnail" onclick="DeleteImg(\‘‘ + file.id + ‘\‘)">‘ + ‘<img>‘ + ‘<div class="info">‘ + file.name + ‘</div>‘ + ‘</div>‘ ), $img = $li.find(‘img‘); // $list為容器jQuery實例 $list.append($li); // 創建縮略圖 // 如果為非圖片文件,可以不用調用此方法。 // thumbnailWidth x thumbnailHeight 為 100 x 100 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith(‘<span>不能預覽</span>‘); return; } $img.attr(‘src‘, src); }, thumbnailWidth, thumbnailHeight); }); // 文件上傳過程中創建進度條實時顯示。 uploader.on(‘uploadProgress‘, function (file, percentage) { var $li = $(‘#‘ + file.id), $percent = $li.find(‘.progress span‘); // 避免重復創建 if (!$percent.length) { $percent = $(‘<p class="progress"><span></span></p>‘) .appendTo($li) .find(‘span‘); } $percent.css(‘width‘, percentage * 100 + ‘%‘); }); // 文件上傳成功,給item添加成功class, 用樣式標記上傳成功。 uploader.on(‘uploadSuccess‘, function (file, response) { $(‘#‘ + file.id).addClass(‘upload-state-done‘); }); // 文件上傳失敗,顯示上傳出錯。 uploader.on(‘uploadError‘, function (file) { var $li = $(‘#‘ + file.id), $error = $li.find(‘div.error‘); // 避免重復創建 if (!$error.length) { $error = $(‘<div class="error"></div>‘).appendTo($li); } $error.text(‘上傳失敗‘); }); // 完成上傳完了,成功或者失敗,先刪除進度條。 uploader.on(‘uploadComplete‘, function (file) { $(‘#‘ + file.id).find(‘.progress‘).remove(); }); //所有文件上傳完畢 uploader.on("uploadFinished", function () { var ststs = uploader.getStats(); //提交表單 alert("成功上傳" + ststs.successNum + "張圖片。"); window.location.reload();//刷新頁面 }); //執行上傳 $("#ctlBtn").click(function () { //var str_material = $("#txt_PartNo").val(); //uploader.options.formData.material = str_material; uploader.upload(); //window.location.href = "/FRUBarCodeOtherMobile/AvatarCollection"; }); }) </script> <div style="padding: 5px;"> <div class="row" style="margin-bottom: 5px;"> <div class="col-xs-3" style="padding: 0; line-height: 34px; font-size: 1em"> <label style="margin-left: 10px;"> 掃描區域: </label> </div> <div class="col-xs-9" style="padding: 0;"> <input type="text" class="form-control" id="txt_scanarea" name="txt_scanarea" style="background-color: #f8ac59" /> </div> </div> <div class="row" style="margin-bottom: 5px;"> <div class="col-xs-3" style="padding: 0; line-height: 34px; font-size: 1em"> <label style="margin-left: 10px;"> 員工工號: </label> </div> <div class="col-xs-9" style="padding: 0;"> <input type="text" class="form-control" id="txt_PartNo" name="txt_PartNo" readonly /> </div> </div> </div> <div id="uploader" class="wu-example"> <!--用來存放文件信息--> <div id="fileList" class="uploader-list"></div> <div class="btns"> <div id="filePicker">選擇文件</div> <button id="ctlBtn" class="btn btn-default">開始上傳</button> </div> </div>
在點擊了選擇文件後,創建縮略圖並追加上去
WebUploader實現采集圖片的功能