webuploader 单文件上传

webuploader 单文件上传

在用webuploadwe做单文件上传时，大多数时候我们只想将最后一次选择的图片上传，并保存在服务器。由于可以多次选择，通常会遇到以下几个问题

1,数据库保存了多余的图片记录，数据库保存了我们最后一次更改图片之前的记录

2,服务器保存了多余的图片,服务器将用户多次更改的图片都进行了上传。

为解决数据库插入无效数据，只需要在提交表单前再进行图片上传。代码如下:

$('#sub').click(function(e){
    e.preventDefault();   //阻止表单提交
    uploader.upload();    //开始上传图片
})

图片上传成功后，提交表单。代码如下：

uploader.on( 'uploadSuccess', function( file,response ) {
    if(response.status == 200){
        $('#a_id').val(response.att_id);  //将图片id保存在隐藏域
        $('form')[0].submit();            //提交表单
    }
});

但表单提交后，服务器任然保存了多余的图片。webuploader 会将每次选择的图片信息保存在队列中，在触发上传操作后会将队列中的图片依次上传。
为解决这一麻烦，只需在每次文件加入队列时清空之前队列中的文件。代码如下：

uploader.on('beforeFileQueued',function(file){
    uploader.reset();    //重置队列文件
});