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(); //重置队列文件
});