webuploader实现点击图片上传功能

最新推荐文章于 2024-05-08 23:39:58 发布

ftaomanman

最新推荐文章于 2024-05-08 23:39:58 发布

阅读量1.3k

点赞数

之前写过一篇webuploader基本使用过程中的一些问题，可以参考
webuploader使用

本文实现的功能：

以默认图片作为初始图像，点击可更换图像
一次只能上传一张图片，但是每次选择完毕，图片都会上传到服务器，服务器接受图片并为图片设置唯一的id（避免图片url冲突）
js将服务器返回的图片url保存到隐藏的input元素中，提交表单时，会上传最新的图片在服务器中的url，后台服务器将最新的图片的url更新到对应的数据库表
前端html代码如下（只是截取了图片上传的一部分），要实现点击图片上传的效果，必须把img元素放在div中。这里我给img元素固定了大小，并设置了默认图片
注意：这部分内容是写在表单里的，这同时也会导致一个问题，后文再讨论

<div class="col-md-6">
<label for="DepartmentLogo">机构LOGO</label>

<input id="logoURL" type="text" name="logoURL" value="/static/img/defaultLogo.png" class="hidden">

<div id="info" class="uploader-list"></div>
</div>
<div id="picker" class="col-md-6 " id="logolist" title="点击上传logo" height="100" width="100">
<div id="">
<img id="logoImg" title="点击上传logo" height="100" width="100" src="/static/img/defaultLogo.png">
</div>
</div>

</div>
</div>
webuploader上传组件代码如下

//logo上传
/*init webuploader*/
var $info = $('#info');
var uploader = WebUploader.create({
//是否自动上传，如果为false，则在之前的html代码中需要再设置一个button来进行上传
auto: true,
// swf文件路径（根据你自己的工程目录进行设置）
swf: '../../static/lib/plugins/webuploader/Uploader.swf',
// 文件接收服务端（路由）
//服务器主要负责接受图片并给定唯一id，最后转存到其他目录
server: '/basic/department/logoUpload',
pick: {
// 选择文件的按钮。可选
id: '#picker',
// innerHTML: "点击上传logo",
//不允许单次上传时同时选择多个文件
multiple: false
},
//允许上传的文件总数量为1
fileNumLimit: 1,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
//此处一定要写得详细，如果使用'image/*'，chrome浏览器会出现打开资源管理器特别慢的bug！！！！！
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
}
});

uploader.on('fileQueued', function(file) {
$("#logoImg").parent("div").attr({
id: file.id
});

//成功消息不做显示
// var $img_info = $('<span class="info" class="pull-right">' + file.name + '<p class="state"></p>' + '</span>');
// $info.append($img_info);

var $img = $("#logoImg");
// 创建缩略图
uploader.makeThumb(file, function(error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, 100, 100); //100x100为缩略图尺寸
});

/**
* 验证文件格式、数量以及文件大小
*/
uploader.on("error", function(type) {
if (type == "Q_TYPE_DENIED") {
alert("请上传图片格式文件");
} else if (type == "F_EXCEED_SIZE") {
alert("文件大小不能超过8M");
} else if (type == "Q_EXCEED_NUM_LIMIT") {
alert("只能上传一个图片");
}
});

// 文件上传过程中创建进度条实时显示。
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');
}

// $info.find('p.state').text('上传中');

$percent.css('width', percentage * 100 + '%');
});

// 文件上传成功
// uploader.on('uploadSuccess', function(file) {
// $info.find('p.state').text('已上传').css({
// color: 'green'
// });
// });

//文件上传是否成功的状态
//根据服务器返回的数据判断文件是否上传成功
//这个函数会接收来自服务器的文件上传是否成功的状态，这个事件发生在‘uploadError’之前
//data为服务器返回的数据，是个对象
uploader.on("uploadAccept", function(file, data) {
if (data.op_result == "0") {
// 通过return false来告诉组件，此文件上传有错。
return false;
}
//成功，则将logo的url保存
$("#logoURL").val(data.logoPath);
$("#picker").attr({
title: '点击更换logo'
});
});
// 文件上传失败，显示上传出错
uploader.on('uploadError', function(file) {
var $img_info = $('<span class="info pull-left">' + file.name + '<p class="state"></p>' + '</span>');
$info.append($img_info);
$info.find('p.state').text('上传出错').css({
color: 'red'
});
//如果上传失败，logo显示为默认logo
$("#logoImg").attr('src', "/static/img/failLogo.png");
$("#logoURL").val("/static/img/defaultLogo.png");
//2秒之后提示信息消失
setTimeout(function() {
$img_info.remove();
}, 2000);
});

// 完成上传
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut();
//重置uploader，令其可以继续上传logo
uploader.reset();
});
表单上传时遇到的麻烦
我用的是jQuery的插件来校验数据项，提交时触发submitHandler，调用$(form).ajaxSubmit()函数(注释的部分)。
可这里有个大问题,图片能够上传成功，但是$(form).ajaxSubmit()无论是success还是error都没有反应。

打开控制台报的错误是jQuery.handleError is not a function 。
这个错误可是困扰了好久，网上给的都是关于$.ajaxFileUpload()方法上传文件所导致的问题。我猜想下述方法或许能够解决问题（但这个方法我并没有进行实验，有兴趣的读者可以尝试，也非常欢迎给我反馈。）

把文件上传组件放在边单外面进行上传
将保存图片url的隐藏input依然放在表单内部
利用js改变隐藏input的值进行表单提交

我尝试了直接利用.ajax进行表单提交，将表单数据进行序列化之后提交data:.ajax进行表单提交，将表单数据进行序列化之后提交data:(‘#DepartmentNewForm’).serialize(),问题成功解决！！！
正确的代码如下：

$("#DepartmentNewForm").validate({
rules: {

},
messages: {

},
errorPlacement: function(error, element) {

},
submitHandler: function(form) {
// $(form).ajaxSubmit({
// type: "post",
// dataType: "json",
// url: "/basic/department/departmentNewDo",
// success: function(data) {
// // console.log(data);
// if (data.op_result === 1) {
// $("#DepartmentGUID").attr("value", data.departmentGUID);
// $('#opResultID').html(data.message).css("color", "green").show();
// setTimeout(function() {
// $('#opResultID').hide();
// }, 2000);
// } else {
// $('#opResultID').html(data.message).show();
// }
// },
// error: function(data, status, e) {
// //上传失败之后的操作
// alert("111");
// },
//
// });
$.ajax({
// cache: true,
type: "POST",
dataType: "json",
url: "/basic/department/departmentNewDo",
data: $('#DepartmentNewForm').serialize(),
// async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
if (data.op_result === 1) {
$("#DepartmentGUID").attr("value", data.departmentGUID);
$('#opResultID').html(data.message).css("color", "green").show();
setTimeout(function() {
$('#opResultID').hide();
}, 2000);
} else {
$('#opResultID').html(data.message).show();
}
}
});
}
});

ftaomanman

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webuploader实现点击图片上传功能

之前写过一篇webuploader基本使用过程中的一些问题，可以参考 webuploader使用本文实现的功能：以默认图片作为初始图像，点击可更换图像一次只能上传一张图片，但是每次选择完毕，图片都会上传到服务器，服务器接受图片并为图片设置唯一的id（避免图片url冲突）js将服务器返回的图片url保存到隐藏的input元素中，提交表单时，会上传最新的图片在服务器中的url，后台服务器...
复制链接

扫一扫