一、百度文档
```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 "> </ body></ div> </ div> <-! <the Button the above mentioned id =" ctlBtn "class =" btn btn-default "> start uploading </ the Button> ->
<div the above mentioned id =" Picker "> Choose File </ div>
// If you want to slice, how much a minute? The default size is 5M.
chunkSize: 1024 * 1024 * 20,
// not compressed image, will default if it is pre-compressed jpeg, upload a file and then upload!
a resize: to false
});
// if any files have been added to the queue when
uploader.on ( 'fileQueued', function (File) {
the console.log (file.id);
the console.log (file.name);
$ List .append ( '<div ID = "' + file.id + '" class = "Item">' +
'<H4 class = "info">' + file.name + '</ H4>' +
'<P class = "state"> percentage </ P> '+
' </ div> ');
});
create a progress bar // file upload real-time display process.
uploader.on ( 'uploadProgress',
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 ( 'uploaded');.
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.html
二、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"> Software version: <span the above mentioned id = "softwareVersion"> V2.0 </ span> </ li>
<li>
<div the above mentioned id = "Picker"> select </ div> <-! - Upload button, you must specify the value of the id selector ->
<div class = "progress"> <-! progress bar ->
<div class = "the ProgressBar the ProgressBar the Active-Striped" Role = "the ProgressBar "style =" width: 0%; "> </ div>
</ div>
</ Li>
<Li class =" Item "> SEQ ID NO: <span id =" serialNumber " > CY18-NA2B-A018-5081 < / span> </ li>
<li class = "Item"> manufacturers: <span id = "manufacturer" > Technology (Beijing) Co., Ltd. </ 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 (); // generates a unique ID
var = WebUploader.create Uploader ({// Create the upload control
swf: '../static/js/Uploader.swf', // swf position, this may be related to the flash
server: '/ upload / accept' , // receiving each fragment server address
pick: '#picker', // upload button ID
Auto: to true, // after selecting the file, whether or not automatically uploaded
chunked: true, // whether the fragment
chunkSize: 20 * 1024 * 1024, // size of each tile, here 20M
chunkRetry:. 3, // if failed to upload a slice, the number of retries
threads: 1, / number / thread, taking into account the server, where we chose 1
duplicate: true, // whether to automatically slice deduplication
formData: {// upload each slice, with the data carried
task_id: task_id,
},
});
uploader.on ( 'the startUpload', function () {// start uploading, the method is called
$ ( 'Progress-bar.') CSS ( 'width', '0%');.
$ ( '. Progress-bar') text ( '0%');.
});
uploader.on ( 'uploadProgress', the function (file, percentage) {// a slice successfully uploaded, the method is called
$ (' progress-bar. ' ) css (' width ', percentage * 100 -. 1 +' % ');
$ (' bar-Progress') text (Math.floor (PERCENTAGE 100 * -. 1. +.) '%');
});
uploader.on ( 'uploadSuccess', function ( file) {// the entire file all fragments are successfully uploaded, the method is called
// information (unique file identifier, the file name) uploaded
var data = { 'task_id': task_id, 'filename': file.source [ 'name']};
$ .get ( '/ Upload / Complete', data); // Ajax carrying data retransmission request to the url
$ ( 'progress-bar.' ). CSS ( 'width', '100%');
. $ ( '.-bar Progress') text ( 'uploaded');
});
uploader.on ( 'the uploadError', function (File) {// upload process abnormality occurs, the method is called
$ ( 'Progress-bar.') CSS ( 'width', '100%');.
. $ ( '. Progress-bar') text ( "failed to upload ');
});
uploader.on ( 'uploadComplete',function (file) {// upload the end, regardless of the file upload eventually successful, the method will be called
. $ ( '.-bar Progress') removeClass ( 'bar-Active-Striped Progress');
});
});
</ Script>
`` `
Source: https: //blog.csdn.net/jinixin/article / details / 77545140
three, angular Edition example 1 (code below performs initialization phase)
`` `JavaScript
IF ($ scope.file_.uploader) return;
var WebUploader.Base.guid task_id = (); // unique ID generated
$ scope.file_.uploader = WebUploader.create ({// Create the upload control
server: './system/devinfo/upload', // receiving each fragment server address
pick: '# device-updata- button', / id / upload button
auto: true, // after selecting the file, whether to automatically upload
chunked: true, // whether the fragment
chunkSize: 20 * 1024 * 1024, // size of each tile, here 20M
chunkRetry:. 3 // a slice If upload fails, retries
threads: 1, // number of threads, taking into account the server, where we chose 1
duplicate: true, // whether to automatically slice deduplication
formData: {// upload each slice, with the data carried
task_id: task_id,
},
});
$ scope.file_.uploader.on ( 'the startUpload', function () {// start uploading time, the method is called
dir_alert.set ({
title: 'file upload ...',
click_other_hidden: to false,
icon_close: to false,
esc_close: to false,
Theme: {
width: 'by 380px'
},
tpl: '<div class = " progress"> <div class = "progressbar" 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 after ( 'uploadProgress', function (file , percentage) {// a slice successfully uploaded, the method is called
$ ( '. progress-bar' ). css ( 'width', percentage * 100 -. 1 + '%');
$ ( 'Progress-bar.') text (Math.floor (PERCENTAGE 100 * -. 1.) + '%');
$ ( 'Progress-ED.') text (the Math. .floor (PERCENTAGE 100 * -. 1) + '%');
});
$ scope.file_.uploader.on ( 'uploadSuccess to', function (file) {// all the parts of the entire file is uploaded successfully call the the method of uploading information (file a unique identifier, file name)
var {Data =
'task_id': task_id,
'filename': file.source [ 'name']
};
$ .get ( './ System / DevInfo / Complete' , data); // ajax carrying data retransmission request to the url
$ ( 'progress-bar.' ) css ( 'width', '100%').;
$ ( 'Progress-ED.') text ( '100%');.
. $ ( '.-bar Progress') text ( 'uploaded');
$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 ({
the Button: to true,
cancel_hiden: to true,
title: 'upgrade results',
tpl: 'Please upgrade successfully log in again!.'
});
}, 1500)
return;
}
var H the parseInt = (that.time / 60);
var that.time min = 60%;
that.time_s = (H <10 '0' + H:? H) + ':' + (min <10 '0' +? min: min);
}, 1000);
}
},
})
}, 2000)
});
$ scope.file_.uploader.on ( 'the uploadError', function (File) {
$ ( 'Progress-bar.') CSS ( 'width', '100%'. );
$ ( 'Progress-bar.') text ( "failed to upload ');.
});
`
four, angular Edition example 2 (code below performs the initialization phase)
`HTML
<div class =" common- Card-style ">
<form the 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> protocol name </ 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: 'error',
Content: 'The current session has expired, about to jump to the login page. ',
});
Account_m.exit ();
} the else {
$ scope.g_alert (' failed to upload ');!
}
},
Error: function () {
$ scope.g_alert (' communication failure! ');
}
}) ;
};
`` `
five, the angular project, how the incoming event element to element itself in
` `` HTML
<the INPUT of the type = "File" name = "rule" onChange = "angular.element (the this). scope (). fileChanged1 (this) ">
`` `
Use ng-change instruction, will lead to enter a text query once, frequent transfer interfaces, resulting in unnecessary stress on the server.
Use ng-change instruction, but added delay, delay the implementation of transfer interfaces, how much it would be appropriate here delay is a problem.
Replaced the native change event, the end user input, input out of focus, just tune interface.
1. Description of the problem:
(1) the angular project, why not this: <input type = "file" name = "segment" ng-change = "angular.element (this) .scope () fileChanged2 (this)." >
(2) in the angular project, why not this: <input of the type = "File" name = "segment" ng-Change = "fileChanged2 (the this)">
(3) in the angular project, call the native event: <input = of the type "File" name = "segment" onChange =. "angular.element (the this) .scope () fileChanged2 (the this)">
2, the problem doubts:
(1) Since the use ng-change, should direct calls "fileChanged2 ( this) "method should not be used" angular.element (this) .scope () . " to find a way.
(2) since it uses ng-change, if called directly "fileChanged2 (this)" method, this would be considered a mouse event object, rather than input elements.
(3) the use of native onchange event, use the JS statement angular.element (this) .scope (). fileChanged2 (this) the input element that is passed in this.
Six, using a dynamic progress bar on Bootstrap process (two div tag)
1, the outer class = "progress" style = " width: 300px" ng-show = "true", a predetermined pattern display area, the width, is displayed.
1, the inner class = "progressbar" role = " progressbar" aria-valuemin = "0" aria-valuenow = "60" aria-valuemax = "100" ng-style = "{width: XXX}", a predetermined pattern display area, character, show the minimum value, display the default value, a maximum value display, showing current value, wherein the maximum and minimum values for calculating the current proportion.
HTML `` `
<div class =" Progress "style =" width: 300px by "= ng-Show" init_study.state === '. 1' ">
<div class =" ProgressBar "Role =" ProgressBar "aria- = valuemin "0" Aria-valuenow = "60" Aria-valuemax = "100"
ng-style = "{width: init_study.progress}">
! init_study.progress {{}} <- text displayed on the progress bar content ->
</ div>
</ div>
`` `
seven, HTML5 Blob implementation file download function
1, create a element var a = document.createElement ( 'a'
3, download the current file a.download = un_code.utf8Decode (data.headers ( 'filename ')); / * create a local file name to download the file, data.headers ( 'filename') to obtain the server file name, un_code.utf8Decode custom method for converting the file into a different encoding utf-8 encoded * /
4, automated clicking a.click ();
. 5, remove elements $ (a) .remove ();
Large files 44 (fragment) = front end portion upload
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10966929.html
Ranking