webuploader.js 插件使用 and validates使用案例

最新推荐文章于 2025-04-02 17:22:25 发布

原创最新推荐文章于 2025-04-02 17:22:25 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用WebUploader实现文件上传的过程，包括配置参数、监听事件等，并展示了如何利用jQuery Validation进行表单验证，确保数据的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webuploader</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js"></script>
</style>
</head>
<body>
<div id="thelist" class="uploader-list"></div>
<div id="picker">上传图片</div>
<div id="jdt"></div>
<script type="text/javascript">
var uploader = WebUploader.create({

// swf文件路径
swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf',

// 文件接收服务端。
server: 'http://www.auction.com/mt/1.php',

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

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件被添加进队列的时候
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
// console.log(file)
var $li = $(`<div id=${file.id}></div>`);
var $img = $('<img src="">');
$('#thelist').append($li);
$li.append($img)
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src );
uploader.upload();
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function( file, percentage ) {
alert('（上传中）')
$('#jdt').html(percentage * 100 + '%'+'（上传中）');
$('#jdt').css('width', percentage * 100 + '%' );
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ,res) {
console.log(res, file)
$('#jdt').html('上传成功');
alert('上传成功')
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file,res ) {
console.log(file,res)
alert('上传失败')
});
uploader.on('uploadFinished', function( file ) {
alert('上传结束')
});
});
</script>
</body>
</html>

-----------------validate---------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>validate</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("666");
}
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<p>
<label for="cname">姓名</label>
<input id="cname" name="name" type="text">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="passw">
</p>
<p>
<label for="cemail">姓名</label>
<input id="cemail" name="email" type="email">
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script type="text/javascript">
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#commentForm").validate({
rules: {
name:{
required: true,
minlength: 5
},
email:{
required: true,
email:true
},
password:{
required: true,
minlength:6
},
confirm_password:{
required: true,
minlength:6,
equalTo: "#cpassword"
}
},
messages: {
name: {
required: '请输入名字',
minlength:"最少6个字符"
},
email: '请输入正确的邮箱',
password: {
required: '请输入密码',
minlength:"最少6个字符"
},
confirm_password:{
required: '请输入密码',
minlength:"最少6个字符",
equalTo: "两次密码输入不一致"
}

}
})
});
</script>
</body>
</html>