上传图片示例

来源：互联网发布：大众mirrorlink 软件编辑：程序博客网时间：2024/06/05 18:45

-----jsp-----

<input type="hidden" name="certificatePic"/>
<p class="cf-form-title">上传凭证：</p>
<div class="cf-form-file" style="width: 225px;" id="container">
<a class="cf-btn cf-btn-blue" id="pickfiles">选择图片</a>
</div>
<div class="cf-form-txt" style="float: left;">用于银行对账，以加快入账速度</div>
<div>
<span class="msg-box n-right" id="certificatePicErrorTip" style="position:static;">

</span>
</div>
</div>

-----js-----

//提交汇款通知
var sa = $("#submitApply");
sa.click(function(e) {
if (sa.prop("disabled"))
return;
e.preventDefault();
e.stopPropagation();
form$.trigger("validate");
});

var cpInput = $("input[name='certificatePic']");

//已选上传凭证删除
$("#certificatePicLi").on("click", ".cf-img-del", function(e) {
e.preventDefault();
e.stopPropagation();
var p = $(this).parent();
uploader.removeFile(p.attr("id"));
p.remove();
});

var form$ = $("#infoForm");
form$.validator({
stopOnError: false,
timely: false,
messages:{
checked:"请选择{0}"
},
invalid:function() {
if ($("input[name='paymentBank']").hasClass("n-invalid"))
$("#paymentBankSelContainer").addClass("n-invalid");
else
$("#paymentBankSelContainer").removeClass("n-invalid");
if (uploader.files.length <= 0) {//最后进行图片验证
form$.validator('showMsg', '#certificatePicErrorTip', {
type: "error",
msg: "请选择上传凭证"
});
} else {
form$.validator('hideMsg', '#certificatePicErrorTip');
}
},
valid:function(form) {
$("#paymentBankSelContainer").removeClass("n-invalid");
if (uploader.files.length <= 0) {
form$.validator('showMsg', '#certificatePicErrorTip', {
type: "error",
msg: "请选择上传凭证"
});
return;
} else {
form$.validator('hideMsg', '#certificatePicErrorTip');
}
if (sa.prop("disabled"))
return;
sa.prop("disabled", true).addClass("cf-disabled");
$("#certificatePicLi").find(".cf-img-del").remove();
uploader.start();//验证通过后开始上传凭证
}
});

var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles',
container: document.getElementById('container'),
url : ctxResource + "/plupload/Upload.jsp",
flash_swf_url : ctxResource + '/plupload/Moxie.swf',
silverlight_xap_url : ctxResource + '/plupload/Moxie.xap',
multipart_params:{'customer':'<%=customerId%>'},
filters : {
max_file_num : 3,
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,jpeg,png,gif"}
]
},

init: {
PostInit: function() {
document.getElementById('certificatePicLi').innerHTML = '';
},

BeforeUpload: function(up, file) {
up.settings.multipart_params.id = file.id;
},

FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('certificatePicLi').innerHTML += '<p id="' + file.id + '"><span>' + file.name + '</span><b></b><a href="#" class="cf-img-del">删除</a></p>';
});
},

FileUploaded: function(up, file, info) {
var currV = cpInput.val();
if (!currV)
currV = '';
else if (currV != '')
currV += ',';
var r = $.parseJSON(info.response);
if (r.result == 'success')
cpInput.val(currV + r.file);
},

Error: function(up, err) {
if (err.url)
window.location.href=err.url;
},

UploadComplete : function(up, files) {
//文件上传完毕提交申请表单
$.ajax({
url:service + "/funds/deposit/apply",//图片验证成功后，进行整个表单提交，包括图片和其他
type:"POST",
dataType: 'json',
data:form$.serialize(),//表单序列化
success:function(d) {
if (d.status == 0) {
d.url = ctx + "/my/funds/depositOk.jsp";
}
if (d.url)
window.location.href=d.url;//跳转，手动迁移
else
sa.prop("disabled", false).removeClass("cf-disabled");
},
error:function(data) {
sa.prop("disabled", false).removeClass("cf-disabled");
}
});
}
}
});

uploader.init();

0 0