1.使用plupload上传单个图片,上传后在页面显示缩略图;
2.使用的是自动上传,点击按钮选择图片后自动开始上传;
3.当第一次上传图片后,图片传错了,点击按钮再次上传,调用start方法后,没有向后台发送上传数据,延迟一段时间后,后台才接收到数据;
html部分代码:
<div class="form-group">
<label class="col-sm-2 control-label" for="logopath"> 广告主LOGO: </label>
<div class="col-sm-2" id ="uploadLogoDiv">
<button id="uploadLogo" type="button" class="btn btn-primary btn-block">选择并上传</button>
</div>
<input id="hiddenImage" hidden="hidden" name="user.logopath" value="${user.logopath!}"/>
<span id="emsg" style="color: red;"></span>
<img id="showImage" alt="" src="${user.logopath!}">
</div>
js部分代码:
var initplupload = function() {
//1.logo上传
logoUpload = new plupload.Uploader({
browse_button : 'uploadLogo',
url : '${cxt!}/xxx/xxx/uploadLogo',
flash_swf_url : '${cxt!}${tpath!}/js/plugin/plupload/Moxie.swf',
silverlight_xap_url : '${cxt!}${tpath!}/js/plugin/plupload/Moxie.xap',
filters : {
mime_types : [ {
title : "image files",
extensions : "jpg,gif,png"
}],
max_file_size : '150kb'
},
multi_selection : false
});
//初始化
logoUpload.init();
//文件选择后上传
logoUpload.bind('FilesAdded', autoupload);
//上传完成填充数据
logoUpload.bind('FileUploaded',
function(uploader, file, responseObject) {
debugger;
$.each(file, function(idx, item){
uploader.removeFile(item);
});
var logopath=responseObject.response;
var data = $.parseJSON(logopath);
if(data.msg=="error"){
$("#emsg").html("尺寸错误");
$("#hiddenImage").val("");
$("#showImage").attr("src","");
return;
}
$("#emsg").html("");
$("#hiddenImage").val(data.msg);
$("#showImage").attr("src",data.msg);
common_ajax.successF("成功","上传成功!");
});
};
//自动上传
var autoupload = function(uploader, files) {
debugger;
common_ajax.successF("上传","上传开始!");
uploader.start();
};