webuploader实现点击图片上传功能

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

本文实现的功能：

• 以默认图片作为初始图像，点击可更换图像
• 一次只能上传一张图片，但是每次选择完毕，图片都会上传到服务器，服务器接受图片并为图片设置唯一的id（避免图片url冲突）
• js将服务器返回的图片url保存到隐藏的input元素中，提交表单时，会上传最新的图片在服务器中的url，后台服务器将最新的图片的url更新到对应的数据库表

前端html代码如下（只是截取了图片上传的一部分），要实现点击图片上传的效果，必须把img元素放在div中。这里我给img元素固定了大小，并设置了默认图片
注意：这部分内容是写在表单里的，这同时也会导致一个问题，后文再讨论

<div id="uploader" class="form-group col-md-4">
    <div class="row">

        <div class="col-md-6">
            <label for="DepartmentLogo">机构LOGOlabel>
            
            <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 = $('' + file.name + '
' + '');
            // $info.append($img_info);

            var $img = $("#logoImg");
            // 创建缩略图
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('不能预览');
                    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 = $('
' +
                    '
' +
                    '
' +
'
').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 = $('' + file.name + '
' + '');
$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: (‘#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();
                        }
                    }
                });
            }
        });