44大文件(分片)上傳=前端部分
1、百度文檔```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="./webuploader.css"> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./webuploader.js"></script></head><body><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></body></html><script type="text/javascript"> jQuery(function() { var $ = jQuery; var $list = $('#thelist'); /*var $btn = $('#ctlBtn');*/ var state = 'pending'; var uploader; uploader = WebUploader.create({ // swf文件路徑 swf: './Uploader.swf', // 文件接收服務端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是建立，多是input元素，也多是flash. pick: '#picker',//上傳按鈕的id //是否要分片處理大文件上傳。 chunked:true, //若是要分片，分多大一片？ 默認大小爲5M. chunkSize :1024*1024*20, // 不壓縮image, 默認若是是jpeg，文件上傳前會壓縮一把再上傳！ resize: false }); // 當有文件被添加進隊列的時候 uploader.on( 'fileQueued', function( file ) { console.log(file.id); console.log(file.name); $list.append( '<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">百分比</p>' + '</div>' ); }); // 文件上傳過程當中建立進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $div = $( '#'+file.id ); var $percent = $div.find('.progress .progress-bar'); // 避免重複建立 if ( !$percent.length ) { $percent = $div.append('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').find('.progress-bar'); } $div.find('p.state').text('上傳中'); $percent.css( 'width', percentage * 100 + '%' ); }); uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).find('p.state').text('已上傳'); }); uploader.on( 'uploadError', function( file ) { $( '#'+file.id ).find('p.state').text('上傳出錯'); }); uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').fadeOut(); }); });</script>```來源：http://fex.baidu.com/webuploader/getting-started.html2、JQuery版實例```html<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>設備升級</title> <link href="../static/css/webuploader.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="../static/js/jquery.min.js"></script> <script type="text/javascript" src="../static/js/webuploader.js"></script></head><body><div class="place"> <span>位置：</span> <ul class="placeul"> <li><a href="#">首頁</a></li> <li><a href="#">系統-設備信息</a></li> </ul></div><div class="deviceInformation"> <ul class="detail"> <li class="item">名稱：<span id="name">工業監測審計系統</span></li> <li class="item">型號：<span id="type">INA-200</span></li> <li class="item">硬件版本：<span id="hardwareVersion">INA-200-V1802005C</span></li> <li class="item">軟件版本：<span id="softwareVersion">V2.0</span></li> <li> <div id="picker">請選擇</div> <!-- 上傳按鈕，必須指定id選擇器的值 --> <div class="progress"> <!-- 進度條 --> <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%;"></div> </div> </li> <li class="item">序列號：<span id="serialNumber">CY18-NA2B-A018-5081</span></li> <li class="item">製造商：<span id="manufacturer"> 科技（北京）有限公司</span></li> <li class="item">出廠日期：<span id="productionDate">2018年2月10日</span></li> </ul></div></body></html><script type="text/javascript"> $(document).ready(function() { $.ajax({ type: 'get', data: "system_deviceInformation", url: "/system/devinfo/getinfo", success: function (data) { $("#name").html(data.name); $("#type").html(data.type); $("#hardwareVersion").html(data.hardwareVersion); $("#softwareVersion").html(data.softwareVersion); $("#serialNumber").html(data.serialNumber); $("#manufacturer").html(data.manufacturer); $("#productionDate").html(data.productionDate); } }); var task_id = WebUploader.Base.guid(); //生成惟一的ID var uploader = WebUploader.create({ //建立上傳控件 swf: '../static/js/Uploader.swf', //swf位置，這個可能與flash有關 server: '/upload/accept', //接收每個分片的服務器地址 pick: '#picker', //上傳按鈕的id auto: true, //選擇文件後，是否自動上傳 chunked: true, //是否分片 chunkSize: 20 * 1024 * 1024, //每一個分片的大小，這裏爲20M chunkRetry: 3, //某分片若上傳失敗，重試次數 threads: 1, //線程數量，考慮到服務器，這裏就選了1 duplicate: true, //分片是否自動去重 formData: { //每次上傳分片，一塊兒攜帶的數據 task_id: task_id, }, }); uploader.on('startUpload', function() { //開始上傳時，調用該方法 $('.progress-bar').css('width', '0%'); $('.progress-bar').text('0%'); }); uploader.on('uploadProgress', function(file, percentage) { //一個分片上傳成功後，調用該方法 $('.progress-bar').css('width', percentage * 100 - 1 + '%'); $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%'); }); uploader.on('uploadSuccess', function(file) { //整個文件的全部分片都上傳成功，調用該方法 //上傳的信息（文件惟一標識符，文件名） var data = {'task_id': task_id, 'filename': file.source['name'] }; $.get('/upload/complete', data); //ajax攜帶data向該url發請求 $('.progress-bar').css('width', '100%'); $('.progress-bar').text('上傳完成'); }); uploader.on('uploadError', function(file) { //上傳過程當中發生異常，調用該方法 $('.progress-bar').css('width', '100%'); $('.progress-bar').text('上傳失敗'); }); uploader.on('uploadComplete', function(file) {//上傳結束，不管文件最終是否上傳成功，該方法都會被調用 $('.progress-bar').removeClass('active progress-bar-striped'); }); });</script>```來源：https://blog.csdn.net/jinixin/article/details/775451403、angular版實例1（初始化階段執行下面代碼）```javascriptif ($scope.file_.uploader) return;var task_id = WebUploader.Base.guid(); //生成惟一的ID$scope.file_.uploader = WebUploader.create({ //建立上傳控件 server: './system/devinfo/upload', //接收每個分片的服務器地址 pick: '#device-updata-button', //上傳按鈕的id auto: true, //選擇文件後，是否自動上傳 chunked: true, //是否分片 chunkSize: 20 * 1024 * 1024, //每一個分片的大小，這裏爲20M chunkRetry: 3, //某分片若上傳失敗，重試次數 threads: 1, //線程數量，考慮到服務器，這裏就選了1 duplicate: true, //分片是否自動去重 formData: { //每次上傳分片，一塊兒攜帶的數據 task_id: task_id, },});$scope.file_.uploader.on('startUpload', function () { //開始上傳時，調用該方法 dir_alert.set({ title: '文件上傳中...', click_other_hidden: false, icon_close: false, esc_close: false, theme: { width: '380px' }, tpl: '<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div></div>' + '<div style="display: flex;' + 'justify-content: flex-start;' + 'align-items: center;' + 'flex-direction: column;">' + '<p class="text-center" style="margin:10px 0;">已經加載文件<span class="progress-ed"></span>....</p>' + '<img src="../../static/img/icon-updata.png" style="margin:30px 0;" width="37px" height="40px">' + '<button type="button" ng-click="cancel()" ng-bind="button_txt" class="btn btn-default" style="color:#d9534f;border:1px solid #d9534f;background:#fff;"></button></div>', tpl_scope: { button_txt: '取消上傳', cancel: function () { $scope.file_.uploader.stop(true); dir_alert.show(false); } }, })});$scope.file_.uploader.on('uploadProgress', function (file, percentage) { //一個分片上傳成功後，調用該方法 $('.progress-bar').css('width', percentage * 100 - 1 + '%'); $('.progress-bar').text(Math.floor(percentage * 100 - 1) + '%'); $('.progress-ed').text(Math.floor(percentage * 100 - 1) + '%');});$scope.file_.uploader.on('uploadSuccess', function (file) { //整個文件的全部分片都上傳成功，調用該方法 上傳的信息（文件惟一標識符，文件名） var data = { 'task_id': task_id, 'filename': file.source['name'] }; $.get('./system/devinfo/complete', data); //ajax攜帶data向該url發請求 $('.progress-bar').css('width', '100%'); $('.progress-ed').text('100%'); $('.progress-bar').text('上傳完成'); $timeout(function () { dir_alert.show(false); dir_alert.set({ title: '設備升級中...', click_other_hidden: false, icon_close: false, esc_close: false, theme: { width: '380px' }, tpl: '<div ng-init="init()" style="display: flex;' + 'justify-content: flex-start;' + 'align-items: center;' + 'flex-direction: column;">' + '<img src="../../static/img/wait82_82px.png" class="updata-circle" style="margin:30px 0;" width="50px" height="50px">' + '<p class="text-center" style="margin:10px 0;">設備升級中，大約須要時間<span style="color:red" ng-bind="time_s">15:00</span>，請耐心等待。</p></div>', tpl_scope: { timeval: null, time_s: '15:00', time: 15 * 60, init: function () { var that = this; that.timeval = $interval(function () { that.time = that.time - 1; if (that.time === 0) { that.timeval ? $interval.cancel(that.timeval) : angular.noop(); account_m.exit(); dir_alert.show(false); $timeout(function () { dir_alert.set({ button: true, cancel_hiden: true, title: '升級結果', tpl: '升級成功！請從新登陸。' }); }, 1500) return; } var h = parseInt(that.time / 60); var min = that.time % 60; that.time_s = (h < 10 ? '0' + h : h) + ':' + (min < 10 ? '0' + min : min); }, 1000); } }, }) }, 2000)});$scope.file_.uploader.on('uploadError', function (file) { $('.progress-bar').css('width', '100%'); $('.progress-bar').text('上傳失敗');});```4、angular版實例2（初始化階段執行下面代碼）```html<div class="common-card-style"> <form enctype="multipart/form-data" method="post" id="protocol-private-file-upload-form"> <div class="form-inline protocol-private-row"> <div class="form-group"> <label> <span>*</span> <span>協議名稱</span> </label> <input type="text" class="form-control" name="name" ng-model="protocol_form.name" id="protocol-private-protocol-name" style="padding-left: 50px;width:400px;" maxlength="40"> <span class="pre-protocol-string">UDF-</span> </div> </div> <div class="form-inline protocol-private-row"> <div class="form-group"> <label> <span>*</span> <span>協議腳本</span> </label> <button type="button" class="btn btn-outline-primary protocol-private-upload-button"> 選擇文件 <input type="file" name="rule" onchange="angular.element(this).scope().fileChanged1(this)"> </button> <span ng-class="{'text-primary':files_list1[0].name,'text-danger':!files_list1[0].name}">{{files_list1[0].name||'請選擇 .lua格式文件'}}</span> </div> </div> <div class="form-inline protocol-private-row"> <div class="form-group "> <label> <span>*</span> <span>協議描述</span> </label> <button type="button" class="btn btn-outline-primary protocol-private-upload-button"> 選擇文件 <input type="file" name="segment" onchange="angular.element(this).scope().fileChanged2(this)"> </button> <span ng-class="{'text-primary':files_list2[0].name,'text-danger':!files_list2[0].name}">{{files_list2[0].name||'請選擇 .proto格式文件'}}</span> </div> </div> <div class="form-inline protocol-private-row"> <div class="form-group"> <label></label> <button type="submit" ng-click="start_upload()" style="width: 250px" class="btn btn-primary" ng-disabled="!files_list1[0].name||!files_list2[0].name||!protocol_form.name">導入</button> </div> </div> </form> </div>``````javascript$scope.fileChanged1 = function (ele) { $scope.files_list1 = ele.files; $scope.$apply(); }; $scope.fileChanged2 = function (ele) { $scope.files_list2 = ele.files; $scope.$apply(); }; $scope.start_upload = function () { var formdata = new FormData(document.getElementById('protocol-private-file-upload-form')); var protocol_name = $('#protocol-private-protocol-name').val(); formdata.set('name', ('UDF-' + protocol_name)); $.ajax({ url: '/protocol/selfdefine/upload', type: 'post', data: formdata, processData: false, contentType: false, success: function (res) { if (res.status === 1) { $scope.g_tip('上傳成功！'); $scope.pagin_init.reload(); $scope.files_list1 = ''; $scope.files_list2 = ''; $scope.protocol_form.name = ''; angular.element('input[type = file]')[0].value = ''; angular.element('input[type = file]')[1].value = ''; } else if (res.status === 0) { $scope.g_alert(res.msg); } else if (res.status === 1000) { dir_alert.set({ button: true, cancel_hiden: true, click_other_hidden: false, icon_close: false, title: '錯誤', content: '當前會話已過時，即將跳到登陸頁。', }); account_m.exit(); } else { $scope.g_alert('上傳失敗！'); } }, error: function () { $scope.g_alert('通訊失敗！'); } }); };```5、在angular項目中，怎樣將元素自己傳入到元素的事件中```html<input type="file" name="rule" onchange="angular.element(this).scope().fileChanged1(this)">```使用ng-change指令，致使輸入一個文本就會查詢一次，頻繁的調接口，對服務器形成沒必要要的壓力。使用ng-change指令，可是添加延時，延時執行調接口，這裏延時多少才合適是個問題。換成原生change事件，用戶輸入結束後，input失焦，才調接口。一、問題描述：（1）在angular項目中，爲何不這樣：<input type="file" name="segment" ng-change="angular.element(this).scope().fileChanged2(this)">（2）在angular項目中，爲何不這樣：<input type="file" name="segment" ng-change="fileChanged2(this)">（3）在angular項目中，調用原生事件：<input type="file" name="segment" onchange="angular.element(this).scope().fileChanged2(this)">二、問題釋疑：（1）既然用ng-change，應該直接調用"fileChanged2(this)"方法，不該該用"angular.element(this).scope()."來尋找方法。（2）既然用ng-change，若是直接調用"fileChanged2(this)"方法，this會被認爲是鼠標事件對象，而不是input元素。（3）使用onchange原生事件，使用JS語句angular.element(this).scope().fileChanged2(this)將input元素即this傳入。6、bootstrap進度條動態使用方法（兩層div標籤）一、外層 class="progress" style="width:300px" ng-show="true"，規定展現區樣式、寬度、是否顯示。一、內層 class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" ng-style="{width: XXX}"，規定展現區樣式、角色、最小展值、默認展現值、最大展現值、當前展現值，其中最大值和最小值供當前值計算佔比。```html<div class="progress" style="width:300px" ng-show="init_study.state==='1'"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuenow="60" aria-valuemax="100" ng-style="{width: init_study.progress}"> {{init_study.progress}}<!--進度條上展現的文字內容--> </div></div>```7、HTML5 Blob 實現文件下載功能一、建立a元素 var a = document.createElement('a');二、建立當前文件的內存URL a.href = URL.createObjectURL(blob);/*爲下載文件建立本地url，後臺返回result，應當下載的那部分即blob=result.data*/三、下載當前文件 a.download = un_code.utf8Decode(data.headers('filename'));/*爲下載文件建立本地文件名，data.headers('filename')獲取服務器端文件名，un_code.utf8Decode是自定義方法，用於把其它編碼的文件轉換成utf-8編碼，*/四、自動點擊 a.click();五、移除元素 $(a).remove();
相關文章
- 1. 大文件分片上傳
- 2. 前端實現瀏覽器端大文件分片上傳
- 3. 七牛圖片上傳（前端部分）
- 4. 上傳圖片——前端部分
- 5. js分片上傳大文件，前端代碼
- 6. 前端大文件上傳
- 7. 前端上傳組件Plupload使用---上傳大視頻(分片上傳)
- 8. PHP大文件分割上傳（分片上傳）
- 9. SpringBoot WebUploader大文件分片上傳
- 10. vue+大文件分片上傳
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • SVN分支 - SVN 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Git五分鐘教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 大文件分片上傳
- 2. 前端實現瀏覽器端大文件分片上傳
- 3. 七牛圖片上傳（前端部分）
- 4. 上傳圖片——前端部分
- 5. js分片上傳大文件，前端代碼
- 6. 前端大文件上傳
- 7. 前端上傳組件Plupload使用---上傳大視頻(分片上傳)
- 8. PHP大文件分割上傳（分片上傳）
- 9. SpringBoot WebUploader大文件分片上傳
- 10. vue+大文件分片上傳