本文介绍了一个文件上传系统的设计与实现，包括文件选择按钮、图片预览、上传进度显示及错误处理等功能。系统还具备文件像素验证，确保上传的图片符合指定尺寸要求。
1、选择图片按钮以及提示信息：
// 验证文件是否选择，由后台传入，0_文件为空，1_文件不为空
<input id="filecheck" name="filecheck" type="hidden" value="${empty apphomepageApplicationPage.normalcoverimg?'0':'1'}">
// 文件图片路径 供提交保存路径来使用
<input id="fileurl" name="fileurl" type="hidden" value="${apphomepageApplicationPage.normalcoverimg }">
<tr>
<td align="right">
<label class="Validform_label">
图标:
</label>
</td>
<td class="value">
<fieldset>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div class="btns">
<div id="picker" style="float: left;">选择文件</div>
<div style="line-height: 41px;height: 41px;color: #999;" >${restrictedFormat}</div>
</div>
<div id="thelist" class="uploader-list" >
<div id="" class="file-item thumbnail" style="width:120px;float: left;">
// 图片全路径
<img src="${apphomepageApplicationPage.normalcoverallimg}" style="width: 100px;height: 100px;">
</div>
</div>
</div>
</fieldset>
<span class="Validform_checktip" id="file"></span>
</td>
</tr>
2、引入文件css、js:
<link rel="stylesheet" type="text/css" href="src/webuploader.css"></link>
<script type="text/javascript" src="plug-in/src/webuploader.min.js" ></script>
// 项目中还要引入
Uploader.swf文件
3、uploader初始化：
<script type="text/javascript">
var uploader = null;
var kl = null;
/*-------------------------------------------文件上传-----------------------------------------*/
// 图片上传后台方法路径
var urlc= '<%=basePath%>/***.do';
// 跟目录
var BASE_URL="<%=basePath%>";
// 上传入口类
uploader = WebUploader.create({
// swf文件路径
swf: BASE_URL+'/plug-in/webuploader/Uploader.swf',
// 文件接收服务端。
server: urlc,
// {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
duplicate: false,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
// {Boolean} 是否开起同时选择多个文件能力
multiple:false,
// 只允许选择图片文件
accept: {
// {String} 文字描述
title: 'Images',
// {String} 允许的文件后缀，不带点，多个用逗号分割，此处由后台配置传入
extensions: '${validationInformation}',
// {String} 多个用逗号分割
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
// {Object} [可选] 配置生成缩略图的选项
thumb: {
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型
type: 'image/jpg,jpeg,png'
},
//指明参数名称，后台也用这个参数接收文件
duplicate: false,
// {Boolean} [可选] [默认值：false] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传
auto: true,
// {int} [可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列，单位为B
fileSingleSizeLimit: ${maxsize},
// {int} [可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列
fileNumLimit:100,
method: 'POST',
// {Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数
formData:{"isup":"1","bizType":"homepageicon"}
});
// file {File}File对象 当文件被加入队列以后触发
uploader.on( 'fileQueued', function( file ) {
$("#thelist").empty();
var $list = $("#thelist"),
$li = $(
'<div id="' + file.id + '" class="file-item thumbnail" style="width:120px;float: left;">' +
'<img>' ),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// limitwidth、limitheight 来源于后台配置
var limitwidth = ${width};
var limitheight = ${height};
// 验证图片像素是否符合设置规范 根据图片上传情况来使用
uploader.makeThumb( file, function( error, src ) {
imgWidth = file._info.width;
imgHeight = file._info.height;
if(limitwidth!=imgWidth || imgHeight!=limitheight){
$("#file").attr("class","Validform_checktip Validform_wrong");
$("#file").text("文件的像素不符合标准!");
$("#filecheck").val("0");
setTimeout(function() {
$("#"+file.id).remove();
},1000);
}else{
$("#file").attr("class","Validform_checktip Validform_right");
$("#file").text("通过信息验证！");
$("#filecheck").val("1");
}
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, 100, 100 ); //100x100为缩略图尺寸
});
// file {File}File对象
// percentage {Number}上传进度
// 上传过程中触发，携带上传进度
uploader.on( 'uploadProgress', function( file, percentage ) {
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('div.state').html(file.name+'---上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
// file {File}File对象
// response {Object}服务端返回的数据
// 当文件上传成功时触发，给filecheck赋值为1证明图片已经上传成功，fileurl为图片路径。
uploader.on( 'uploadSuccess', function(file, response) {
if(response.success){
console.log(response);
$("#fileurl").val(response.obj);
}else{
$("#filecheck").val(1);
};
});
// file {File}File对象
// reason {String}出错的code
// 当文件上传出错时触发
uploader.on( 'uploadError', function( file) {
$( '#'+file.id ).find('div.state').html(file.name+'---上传出错');
});
// file {File} [可选]File对象
// 不管成功或者失败，文件上传完成时触发
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut('slow');
});
// 此处为页面整个提交的触发事件 可随情况调用
function uploadadcer(){
var filecheck = $("#filecheck").val();
if(filecheck=="0"){
$("#file").attr("class","Validform_checktip Validform_wrong");
$("#file").text("请选择文件!");
return false;
}
};
扫一扫
7875
到【灌水乐园】发言
