先创建DOM节点：<head ng-app="myApp">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.10.1.min.js"></script>
<script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
<!--<script src="file_up.js"></script>-->
</head>
<body ng-controller="myCtrl">
<p><input type="file" value="上传文件"/></p>
</br>
<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 id="my_list"></div>
</div>
</body>
<script>
//实例化
var uploader = WebUploader.create({
// swf文件路径
//swf: BASE_URL + ‘/js/Uploader.swf‘,
// swf:‘http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf‘,
auto: false,
// 文件接收服务端。
server:‘http://127.0.0.1:8020/upFile/file_up.html‘, //在做这个demo的时候，并没有服务器地址，我使用的是HBuilder自带的浏览器打开文件，复制url
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: ‘#picker‘,
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
method:‘POST‘,
});
// 上传队列，仅包括等待上传的文件
var _queue = [];
// 存储所有文件
var _map = {};
// 当有文件被添加进队列的时候
uploader.on( ‘fileQueued‘, function( file ) {
var that_file=file;
_queue.push(file);
draw_page(_queue);
});
//绘制页面
function draw_page(_queue){
$list=$("#my_list");
$list.html("");
console.log($list.html());
for(var i=0;i<_queue.length;i++){
$list.append( ‘<div id="‘ + _queue[i].id + ‘" class="item">‘ +
‘<h4 class="info">‘ + _queue[i].name +
‘<span id="cancelButton" style="background: red;cursor:pointer"‘ + ‘onclick=deleteMyfile(‘+_queue[i].id+‘)‘+ ‘> 取消上传</span>‘
+‘</h4>‘ +
‘</div>‘ );
}
}
//点击开始上传文件
$("#ctlBtn").on("click",function(){
uploader.upload();
});
//点击“取消”按钮，调用事件
function deleteMyfile(myFile_id){
console.log(myFile_id);
//点击取消，删除dom节点刷新界面
// $(myFile_id).remove();
var tar_id= $(myFile_id).attr("id");
$.each(_queue,function(k,v){
if(_queue[k].id==tar_id){
var myFile=_queue[k];
uploader.removeFile(myFile,true);
}
return false;
});
}
//文件删除的详细方式
function _delFile (file){
for(var i = _queue.length - 1 ; i >= 0 ; i-- ){
if(_queue[i].id== file.id){
_queue.splice(i,1);
break;
}
}
//重新绘制界面
draw_page(_queue);
};
//档文件被移除队列de时候
uploader.on("fileDequeued",function(file){
_delFile (file);
});
// 文件上传过程中创建进度条实时显示。
uploader.on( ‘uploadProgress‘, function( file, percentage ) {
alert("uploadProgress--文件正在上传");
var $li = $( ‘#‘+file.id ),
$percent = $li.find(‘.progress .progress-bar‘);
// 避免重复创建
if ( !$percent.length ) {
$percent = $(‘<div class="progress progress-striped active">‘ +
‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ +
‘</div>‘ +
‘</div>‘).appendTo( $li ).find(‘.progress-bar‘);
}
$li.find(‘p.state‘).text(‘上传中‘);
$percent.css( ‘width‘, percentage * 100 + ‘%‘ );
});
//开始上传
uploader.on(‘startUpload‘,function(file){
alert("文件开始上传了------startUpload");
});
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://www.jb51.net/article/96735.htm
http://www.jb51.net/article/96714.htm
http://blog.csdn.net/mooner_guo/article/details/48765151
你也可以看看webuploader官网github
时间： 2024-07-29 08:28:45