上传图片示例

-----jsp-----

上传凭证：

选择图片

用于银行对账，以加快入账速度

-----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 += '

' + file.name + '删除

';
});
},

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();