1. 程式人生 > >WebUploader實現采集圖片的功能

WebUploader實現采集圖片的功能

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實現采集圖片的功能