文件上传插件web uploader

来源：互联网发布：java 深度遍历编辑：程序博客网时间：2024/06/05 22:52

API文档地址：http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_getFiles

$(function(){

// 初始化Web Uploader

var uploader = WebUploader.create({

// 选完文件后，是否自动上传。

auto:true,

// swf文件路径

swf:'${basepath}/webuploader-0.1.5/Uploader.swf',

// 文件接收服务端。

server: server,

//这里根据需要的上传地址自行上传//设置文件上传域的name

failVal:'file',

// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick:"#filePicker",

//这地方说白了就是入口，你需要在哪添加上传按钮，就把拿个元素的id放过来，有可能是input，也可能是a// 只允许选择图片文件。

accept: {

title:'Images',

extensions:'gif,jpg,jpeg,png',

mimeTypes:'image/jpg,image/jpeg,image/png'

//文件上传方式，POST或者GET

method:'POST',

//这里是控制单个文件上传文件大小

fileSingleSizeLimit: maxSize *1024 *1024,

//文件上传请求的参数表，每次发送都会发送此对象中的参数

formData:{'token':uptoken}, });

//这里是上传初始化后动作，括号里第一个参数是事件名称，这是是成功事件

uploader.on('uploadSuccess',

function(file ,response) {

eval(callback(file ,response));

//这里我做了一个回掉，获取服务器回传的数据，因为上传的是一个图片，这是是对服务器回传的图片哈希码进行处理 })

//上传失败事件，我只是加了一个日志打印，一般都是会提示用户上传失败了，有个自己网站设计的弹框什么的

uploader.on('uploadError',function(file, reason){

alert("上传失败");

console.log(reason)

})

（二）

jquery实现简单的上传功能

<span style="font-size:14px;"><script type="text/javascript">
$(function(){
/*init webuploader*/
var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明，好蛋疼。
var $btn =$("#ctlBtn"); //开始上传
var thumbnailWidth = 100; //缩略图高度和宽度（单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: false,
// swf文件路径
swf: '${ctxStatic }/webupload/Uploader.swf',
// 文件接收服务端。
server: '/apm-web/a/test/',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<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 ) { //webuploader方法
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 ) {
$( '#'+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();
});
$btn.on( 'click', function() {
console.log("上传...");
uploader.upload();
console.log("上传成功");
});
});
</script></span>

阅读全文

0 0