图片和文件上传js剖析

/**
* 商户资质信息模块js
*
* 涉及页面组件 {
* 上传组件(UploadFileComponent)
* }
*
*
* 初始化工具(init)
*
* @Author:Waver
*/
var qualificationInfoModule = (function() {

// 上传文件类型
var UPLOAD_FILE_TYPE = {
BUSSINESS_LICENSE: 'BUSSINESS_LICENSE',
ORGANIZATION_CODE: 'ORGANIZATION_CODE',
TAX_REGISTRATION: 'TAX_REGISTRATION',
BANK_ACCOUNT_LICENCE: 'BANK_ACCOUNT_LICENCE',
ID_CARD_FRONT: 'ID_CARD_FRONT',
ID_CARD_BACK: 'ID_CARD_BACK',
PAYMENT_BUSINESS_LICENSE: 'PAYMENT_BUSINESS_LICENSE',
SHOP_PLACE: 'SHOP_PLACE',
SHOP_FRONT: 'SHOP_FRONT',
SHOP_CASHIER: 'SHOP_CASHIER',
APPLY: 'APPLY',
OPTIONAL: 'OPTIONAL'
}

var fileTypeMap = new Map([
[UPLOAD_FILE_TYPE.BUSSINESS_LICENSE , 'imgBusinessLicense'],
[UPLOAD_FILE_TYPE.ORGANIZATION_CODE , 'imgOrganizationCode'],
[UPLOAD_FILE_TYPE.TAX_REGISTRATION , 'imgTaxRegistration'],
[UPLOAD_FILE_TYPE.BANK_ACCOUNT_LICENCE , 'imgBankAccountLicence'],
[UPLOAD_FILE_TYPE.ID_CARD_FRONT , 'imgIdCardFront'],
[UPLOAD_FILE_TYPE.ID_CARD_BACK , 'imgIdCardBack'],
[UPLOAD_FILE_TYPE.PAYMENT_BUSINESS_LICENSE , ''],
[UPLOAD_FILE_TYPE.SHOP_PLACE , 'imgShopPlace'],
[UPLOAD_FILE_TYPE.SHOP_FRONT , 'imgShopFront'],
[UPLOAD_FILE_TYPE.SHOP_CASHIER , 'imgShopCashier'],
[UPLOAD_FILE_TYPE.APPLY , 'imgApply'],
[UPLOAD_FILE_TYPE.OPTIONAL , 'optional']
]);

var uploadFileComponentMap = new Map();
// 申请表资质上传组件列表
var applyUploadFileComponent = new Array();
// 其他资质上传组件列表
var optionalUploadFileComponent = new Array();

//ajaxuploadfile插件input[type='file']对应的id属性的number
var uploadFileNum = 0
function UploadFileComponent(uploadFileDiv) {

var uploadFileObj = null;
// 上传文件类型
var uploadFileType = null;
// 文件上传后对应路径的隐藏域ID
var filePathHiddenId = null;

+function(uploadFileDiv) {
uploadFileObj = $(uploadFileDiv);
uploadFileType = uploadFileObj.attr('file-type');
}(uploadFileDiv);

// 为上传组件添加表单
var addForm = function() {
uploadFileNum ++
var text = '<form id="' + uploadFileObj.attr('file-type') + 'FORM" action="register/upload" enctype="multipart/form-data" method="post">'
+ '<input type="file" class="upload-file-input" id="uploadFile_'+uploadFileNum+'" name="uploadFile" aria-invalid="false">'
+ '<img src="" class="upload-img-file upload-file-show" data-src="" style="z-index: 999; display: none;">'
+ '<a class="delete-image-btn" style="display: none;"></a>'// 删除按钮
+ '<a class="change-image-btn" style="display: none;"></a>'// 点击查看放大图片
+ '<p class="validation-error"><p/>'
+ '</form>';
uploadFileObj.find('.upload-photo-name').after(text);

bind_change_event_for_file_input();

// 添加点击删除事件
bind_click_event_for_delete_btn();
return uploadFileNum
}

var bind_change_event_for_file_input = function() {
uploadFileObj.find('.upload-file-input').change(function() {
uploadFile(this);
});

// 点击按钮重新上传文件(优化点3)
uploadFileObj.find('.change-image-btn').click(function(){
$(this).parent().find(".upload-file-input").attr("disabled",false)
$(this).parent().find(".upload-file-input").eq(0).trigger("click")
uploadFile(this.previousSibling.previousSibling.previousSibling);
});
}



// 上传文件
var uploadFile = function(inputFileObj) {
console.log(inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length-1])
if(inputFileObj.files[0] == undefined){
return;
}
// 只允许上传jpg jpeg gif png类型的图片
var pattern=/\.(pdf|jpg|jpeg|gif|png)$/;
//上传 pdf,zip,rar
var patternTwo = /\.(pdf|zip|rar)$/
// 只允许上传zip pdf文件
var patternThree = /\.(zip|rar)$/
if($(inputFileObj).next().attr("src") == "" || $(inputFileObj).next().attr("src") == "undefined"){
console.log($(inputFileObj).next().attr("src") == "")
}else{
console.log($(inputFileObj).next().attr("src") == "undefined")
}
if(pattern.test(inputFileObj.files[0].name) == false && patternTwo.test(inputFileObj.files[0].name) == false){// 上传了非制定类型的图片
$.alert({
title:"",
content:"文件格式错误,请重新选择",
buttons:{
'确定':function(){
$("body").mLoading("hide");
}
}
});
return;
}

//在非资质信息区域上传rar和zip文件
if(patternThree.test(inputFileObj.files[0].name) && !($(inputFileObj).parent().parent().parent().attr("file-type") == "OPTIONAL")){
console.log("只有资质照片才能上传zip和rar")
YEEPAY.popTosure({
msg : "只有其他资质照片才可以传zip或rar文件",
btnNumber: 'one'
})
}// 非图片上传和下载√
else if(patternTwo.test(inputFileObj.files[0].name)){
var qualificationType = uploadFileObj.attr('file-type');

var fileType = inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length-1]

// 上传文件前,禁用提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', true);
} else {
$('#registerSubmit').attr('disabled', true);
}

// 上传非图片(调用函数)
ajaxFileUpload(inputFileObj)
function ajaxFileUpload(inputFileObj){
$.ajaxFileUpload({
url:contextPath +"url",
type: "post",
data : {
fileType: fileType,
qualificationType: qualificationType || ""
},
dataType: 'json',
secureuri: false, //一StringToEnumConverterFactory般设置为false
fileElementId: $(inputFileObj).attr("id"), // 上传文件的id属性名
success: function(data, status){
console.log(data)
removeUploadFile();

if(fileType == "zip" || fileType == "rar"){
uploadFileObj.find('.upload-img-file').attr("data-src", data.filepath);
uploadFileObj.find('.upload-img-file').attr("src", contextPath + "/dist/images/zip.png");
}
if(fileType == "pdf"){
uploadFileObj.find('.upload-img-file').attr("data-src", data.filepath);
uploadFileObj.find('.upload-img-file').attr("src", contextPath + "/dist/images/pdf.png");
}

// 添加图片路径隐藏域(后台需要)
$('#opRegisterForm').append('<input type="hidden" id="' + getFilePathHiddenId() + '" name="' + fileTypeMap.get(qualificationType) + '" value="' + data.filepath + '" />');


//显示图片 显示button
uploadFileObj.find('.upload-img-file').show();
uploadFileObj.find('.delete-image-btn').show();
uploadFileObj.find('.change-image-btn').show();

//下载zip和pdf
var downFunc = uploadFileObj.find('.upload-img-file').click(function(){
var _this = this
var downObj = $(_this)
YEEPAY.popTosure()
$(".sureDownload").click(function(){
window.location.href = contextPath + 'url?fileRelativePath=' + downObj.attr("data-src")
})
});
//downFun = null

// 上传文件成功后,恢复提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', false);
} else {
$('#registerSubmit').attr('disabled', false);
}
},
error: function(data, status, e){
alert(e);
// 上传文件失败后,恢复提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', false);
} else {
$('#registerSubmit').attr('disabled', false);
}
}
});
}
return
}
else {

//lrz实现本地压缩后上传图片
lrz(inputFileObj.files[0], {width: 1024, quality: 0.8}).then(function (rst) {
sourceSize = toFixed2(inputFileObj.files[0].size / 1024);
resultSize = toFixed2(rst.fileLen / 1024);// fielLen返回的是文件的长度
scale = parseInt(100 - (resultSize / sourceSize * 100));
//alert(sourceSize+"->"+resultSize+",scale:"+scale);
var form = $(inputFileObj).parent();
//资质文件类型
var qualificationType = uploadFileObj.attr('file-type');
//上传文件类型
var fileType = inputFileObj.files[0].name.split(".")[inputFileObj.files[0].name.split(".").length - 1]

// 上传文件前,禁用提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', true);
} else {
$('#registerSubmit').attr('disabled', true);
}

Common.ajax(contextPath + 'url/register/uploadImg', 'POST',
{
fileData: rst.base64,
fileType: fileType,
qualificationType: qualificationType || ""
}, function (response) {
removeUploadFile()

//显示缩略图 换路径
uploadFileObj.find('.upload-img-file').attr("src", rst.base64);//这里显示的就是缩略图
//显示图片 显示button
uploadFileObj.find('.upload-img-file').show();
uploadFileObj.find('.delete-image-btn').show();
uploadFileObj.find('.change-image-btn').show();

// 这个是显示大图的
uploadFileObj.find('.upload-img-file').click(function () {
// 这个是弹出新窗口
window.open('url/showImage?filePath=' + response.filepath, '_blank', "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
});

// 添加图片路径隐藏域(后台需要)
$('#opRegisterForm').append('<input type="hidden" id="' + getFilePathHiddenId() + '" name="' + fileTypeMap.get(qualificationType) + '" value="' + response.filepath + '" />');

// 禁用上传功能(每次点击都会调用这个方法,所以下次就仍旧可以上传)
uploadFileObj.find('.upload-file-input').attr('disabled', true); // 点击切换图片

// 上传文件成功后,恢复提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', false);
} else {
$('#registerSubmit').attr('disabled', false);
}
}, function () {
uploadFileObj.find('.upload-file-input').val('');
// 上传文件失败后,恢复提交按钮
if('CHAIN_HEAD_REGISTER' == opType) {
$('#submit_test').attr('disabled', false);
} else {
$('#registerSubmit').attr('disabled', false);
}

$.alert({
title: "",
content: "图片上传失败或超时,请重试",
buttons: {
'确定': function () {
$("body").mLoading("hide");
}
}
});
}, {
timeout: 180000,
async: true
});

return rst;
}).catch(function (err) {
// 处理失败会执行
}).always(function () {
// 不管是成功失败,都会执行
});
}
}


var toFixed2 = function(num) {
return parseFloat(+num.toFixed(2));
}

var getUploadFileType = function() {
return uploadFileType;
}

var setImage = function(imageFilePath) {

var uploadFileType = getOrigUploadFileType(imageFilePath);

if(!uploadFileType) {
return;
}

// 先删除了一个,又添加了一个img
uploadFileObj.find('.upload-img-file').remove();

if(uploadFileType == 'pdf') {
uploadFileObj.find('.upload-file-input').after('<img src="' + contextPath + '/dist/images/pdf.png" class="upload-img-file upload-file-show" style="z-index: 999;">');
} else if(uploadFileType == 'zip' || uploadFileType == 'rar') {
uploadFileObj.find('.upload-file-input').after('<img src="' + contextPath + '/dist/images/zip.png" class="upload-img-file upload-file-show" style="z-index: 999;">');
} else {
uploadFileObj.find('.upload-file-input').after('<img src="' + imageFilePath + '" class="upload-img-file upload-file-show" style="z-index: 999;">');
}

// 显示删除按钮
uploadFileObj.find('.delete-image-btn').show();
uploadFileObj.find('.change-image-btn').show();
}

// 获取上传文件类型
var getOrigUploadFileType = function(imageFilePath) {
if(!imageFilePath || imageFilePath.length == 0) {
return null;
}
var fileTypePos = imageFilePath.lastIndexOf('.');
if(fileTypePos > -1) {
return imageFilePath.substring(fileTypePos + 1);
} else {
return null;
}
}

// 是否支持下载
var isDownload = function(imageFilePath) {
var fileType = getOrigUploadFileType(imageFilePath);

if(!fileType) {
return false;
}

// pdf、zip、rar支持下载
var pattern = /^(pdf|zip|rar)$/;

return pattern.test(fileType);
}

// 禁用上传功能
var disableUploading = function() {
uploadFileObj.find('.upload-file-input').attr('disabled', true);
}
//使用上传功能
var enableUploading = function() {
//控制disable属性
uploadFileObj.find('.upload-file-input').attr('disabled', false);
uploadFileObj.find('.upload-file-input').val('');
}

// 为删除按钮绑定click事件
var bind_click_event_for_delete_btn = function() {
uploadFileObj.find('.delete-image-btn').click(function() {
removeUploadFile();
});
}

// 删除已经上传的图片
var removeUploadFile = function() {

var uploadFileHidden = $('#opRegisterForm').find('input[id="' + getFilePathHiddenId() + '"]');
var uploadFilePath;
if(uploadFileHidden) {
//获取上传文件路径
uploadFilePath = uploadFileHidden.val();
// 删除增加上传文件路径对应的hidden
uploadFileHidden.remove();
}

if(uploadFilePath) {
// 增加待删除文件路径对应的hidden
$('#opRegisterForm').append('<input type="hidden" name="delete_op_img" value="' + uploadFilePath + '">');
}
// 移除图片显示
removeImage();
// 启用上传功能
enableUploading();
}

var removeImage = function() {
uploadFileObj.find('.upload-img-file').hide();
uploadFileObj.find('.delete-image-btn').hide();
uploadFileObj.find('.change-image-btn').hide();
uploadFileObj.find('.upload-img-file').off('click',null)
}


var getFilePathHiddenId = function() {
return filePathHiddenId;
}

var setFilePathHiddenId = function(hiddenId) {
filePathHiddenId = hiddenId;
}

var getUploadFileObj = function() {
return uploadFileObj;
}


return {
addForm : addForm,
getUploadFileType : getUploadFileType,
setImage : setImage,
disableUploading : disableUploading,
getFilePathHiddenId : getFilePathHiddenId,
setFilePathHiddenId : setFilePathHiddenId,
getUploadFileObj : getUploadFileObj,
removeUploadFile : removeUploadFile,
getOrigUploadFileType : getOrigUploadFileType,
isDownload : isDownload
}
}



//
var getUploadFileComponentMap = function() {
return uploadFileComponentMap;
}

// 校验必传资质文件是否上传
var validateUploadingFile = function() {

var result = true; // 校验结果

$.each(UPLOAD_FILE_TYPE, function(key, value) {

if(UPLOAD_FILE_TYPE.BUSSINESS_LICENSE == value) {
// 检查营业执照号是否填写,如果填写,营业执照资质必须上传
if($('#businessLicence').val() != null && $('#businessLicence').val().trim() != '') {
if(!_validate(value)) {
result = false;
}
} else {
// 清除原有校验提示信息
var uploadFileComponent = uploadFileComponentMap.get(value);
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
}
} else if(UPLOAD_FILE_TYPE.ORGANIZATION_CODE == value) {
// 检查组织机构代码证是否填写,如果填写,组织机构代码证资质必须上传
if($('#orgCode').val() != null && $('#orgCode').val().trim() != '') {
if(!_validate(value)) {
result = false;
}
} else {
// 清除原有校验提示信息
var uploadFileComponent = uploadFileComponentMap.get(value);
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
}
} else if(UPLOAD_FILE_TYPE.TAX_REGISTRATION == value) {
// 检查税务登记证是否填写,如果填写,税务登记证资质必须上传
if($('#taxCode').val() != null && $('#taxCode').val().trim() != '') {
if(!_validate(value)) {
result = false;
}
} else {
// 清除原有校验提示信息
var uploadFileComponent = uploadFileComponentMap.get(value);
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
}
} else if(UPLOAD_FILE_TYPE.ID_CARD_FRONT == value) {
if(!_validate(value)) {
result = false;
}
} else if(UPLOAD_FILE_TYPE.ID_CARD_BACK == value) {
if(!_validate(value)) {
result =false;
}
} else if(UPLOAD_FILE_TYPE.APPLY == value) {
if(!_validate(value)) {
result = false;
}
} else if(UPLOAD_FILE_TYPE.PAYMENT_BUSINESS_LICENSE == value) {
// 代理商类型为支付机构时,支付许可证必须上传
if($('input[name="oPOperatorParam[\'agentType\']"]:checked').val()) {
if('AGENT_PAYMENT' == $('input[name="oPOperatorParam[\'agentType\']"]:checked').val()) {
if(!_validate(value)) {
result = false;
}
} else {
// 清除原有校验提示信息
var uploadFileComponent = uploadFileComponentMap.get(value);
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
}
}
}

});

return result;
}

// 门店入网页,校验必传资质文件是否上传
var validateUploadingFileForChain = function() {

var result = true; // 校验结果

$.each(UPLOAD_FILE_TYPE, function(key, value) {

if(UPLOAD_FILE_TYPE.APPLY == value) {
if(!_validate(value)) {
result = false;
}
}
});

return result;
}

var _validate = function(uploadFileType) {

var result = true; // 校验结果

if(UPLOAD_FILE_TYPE.APPLY == uploadFileType) {// 上传文件类型

var flag = true;

$.each(applyUploadFileComponent, function (index, component) {
var inputFileObj = component.getUploadFileObj().find('input[type=file]');

if($('#opRegisterForm').find('input[id=' + uploadFileType + '_' + (index + 1) +']')[0]) {
flag = false;
}
});

if(flag) {
applyUploadFileComponent[0].getUploadFileObj().find('.validation-error').text('请上传文件!');
result = false;
} else {
applyUploadFileComponent[0].getUploadFileObj().find('.validation-error').text('');
}
} else if(UPLOAD_FILE_TYPE.OPTIONAL == uploadFileType) {

} else if(UPLOAD_FILE_TYPE.ID_CARD_FRONT == uploadFileType || UPLOAD_FILE_TYPE.ID_CARD_BACK == uploadFileType) {

var uploadFileComponent = uploadFileComponentMap.get(UPLOAD_FILE_TYPE.ID_CARD_FRONT);

if($('#opRegisterForm').find('input[id='+ UPLOAD_FILE_TYPE.ID_CARD_FRONT + ']')[0] || $('#opRegisterForm').find('input[id='+ UPLOAD_FILE_TYPE.ID_CARD_BACK + ']')[0]) {
// 清除校验信息
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
} else {
// 提示校验信息
uploadFileComponent.getUploadFileObj().find('.validation-error').text('请上传文件!');
result = false;
}
}else {
var uploadFileComponent = uploadFileComponentMap.get(uploadFileType);

if($('#opRegisterForm').find('input[id='+ uploadFileType + ']')[0]) {
// 清除校验信息
uploadFileComponent.getUploadFileObj().find('.validation-error').text('');
} else {
// 提示校验信息
uploadFileComponent.getUploadFileObj().find('.validation-error').text('请上传文件!');
result = false;
}
}

return result;
}

// 初始化组件
var init = (function() {
return {
initialize : function() {

uploadFileComponentMap.set(UPLOAD_FILE_TYPE.APPLY, applyUploadFileComponent);
uploadFileComponentMap.set(UPLOAD_FILE_TYPE.OPTIONAL, optionalUploadFileComponent);

$('.pic-module .upload-photo').each(function(index, uploadPhotoDiv) {
var uploadFileComponent = new UploadFileComponent(uploadPhotoDiv);
uploadFileComponent.addForm();

// 将上传组件添加到map中
if(UPLOAD_FILE_TYPE.APPLY == uploadFileComponent.getUploadFileType()) {
applyUploadFileComponent.push(uploadFileComponent);
uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.APPLY + '_' + applyUploadFileComponent.length);
} else if(UPLOAD_FILE_TYPE.OPTIONAL == uploadFileComponent.getUploadFileType()) {
optionalUploadFileComponent.push(uploadFileComponent);
uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.OPTIONAL + '_' + optionalUploadFileComponent.length);
} else {
uploadFileComponentMap.set(uploadFileComponent.getUploadFileType(), uploadFileComponent);
uploadFileComponent.setFilePathHiddenId(uploadFileComponent.getUploadFileType());
}
});

// 添加按钮绑定事件
$('.pic-module .add-upload-photo').each(function(index, addUploadPhotoLi) {
var fileType = $(addUploadPhotoLi).attr('file-type');
// 申请表资质信息添加按钮事件
if(UPLOAD_FILE_TYPE.APPLY == fileType) {
$(addUploadPhotoLi).click(function() {
if(applyUploadFileComponent.length < 2) {
var text = '<li class="upload-photo" file-type="APPLY"><div class="upload-block">'
+ '<div class="upload-photo-name">'
+ '<span class="iconfont icon-tianjiatupian"></span>'
+ '<p>申请表</p></div></div></li>';

$(addUploadPhotoLi).before(text);

var uploadPhotoLi = $('.pic-module .apply-frame').find('.upload-photo:last');

var uploadFileComponent = new UploadFileComponent(uploadPhotoLi);
uploadFileComponent.addForm();

applyUploadFileComponent.push(uploadFileComponent);

uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.APPLY + '_' + applyUploadFileComponent.length);
}
if (applyUploadFileComponent.length == 2) {
$(addUploadPhotoLi).hide();
}
});
// 其他资质信息添加按钮事件
} else if(UPLOAD_FILE_TYPE.OPTIONAL == fileType) {
$(addUploadPhotoLi).click(function () {
if (optionalUploadFileComponent.length < 10) {
var text = '<li class="upload-photo" file-type="OPTIONAL"><div class="upload-block">'
+ '<div class="upload-photo-name">'
+ '<span class="iconfont icon-tianjiatupian"></span>'
+ '<p>其他</p></div></div></li>';

$(addUploadPhotoLi).before(text);

var uploadPhotoLi = $('.pic-module .optional-frame').find('.upload-photo:last');

var uploadFileComponent = new UploadFileComponent(uploadPhotoLi);
uploadFileComponent.addForm();

optionalUploadFileComponent.push(uploadFileComponent);

uploadFileComponent.setFilePathHiddenId(UPLOAD_FILE_TYPE.OPTIONAL + '_' + optionalUploadFileComponent.length);
}
if (optionalUploadFileComponent.length == 10) {
$(addUploadPhotoLi).hide();
}
});
}
});

// 加载已经上传的资质图片
if(initData.qualification) {

$.each(UPLOAD_FILE_TYPE, function(key, value) {

if(initData.qualification[value]) {

if (UPLOAD_FILE_TYPE.APPLY == value) { // 这个的应用信息
$.each(applyUploadFileComponent, function (index, component) {
if(initData.qualification[value][index]) {
component.setImage('url/showImage?filePath=' + initData.qualification[value][index]);
component.disableUploading();

var uploadFileObj = component.getUploadFileObj();

if(component.isDownload(initData.qualification[value][index])) {
uploadFileObj.find('.upload-img-file').click(function () {
window.location.href = contextPath + 'url/download?fileRelativePath=' + initData.qualification[value][index];
})
} else {
uploadFileObj.find('.upload-img-file').click(function () {
window.open('url/manage/showImage?filePath=' + initData.qualification[value][index], '_blank',"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
})
}

// 添加图片路径隐藏域
$('#opRegisterForm').append('<input type="hidden" id="' + component.getFilePathHiddenId() + '" name="' + fileTypeMap.get(value) + '" value="' + initData.qualification[value][index] + '" />');
}
});
} else if (UPLOAD_FILE_TYPE.OPTIONAL == value) {// 这个是资质信息
$.each(optionalUploadFileComponent, function (index, component) {
if(initData.qualification[value][index]) {
component.setImage('url/merchant/manage/showImage?filePath=' + initData.qualification[value][index]);
component.disableUploading();


//$('.upload-file-show').click(function(){
// window.open('url/manage/showImage?filePath=' + initData.qualification[value][index], '_blank',"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
//
//})

var uploadFileObj = component.getUploadFileObj();

if(component.isDownload(initData.qualification[value][index])) {
uploadFileObj.find('.upload-img-file').click(function () {
window.location.href = contextPath + 'url/download?fileRelativePath=' + initData.qualification[value][index];
})
} else {
uploadFileObj.find('.upload-img-file').click(function () {
window.open('url/merchant/manage/showImage?filePath=' + initData.qualification[value][index], '_blank',"scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
})
}

// 添加图片路径隐藏域
$('#opRegisterForm').append('<input type="hidden" id="' + component.getFilePathHiddenId() + '" name="' + fileTypeMap.get(value) + '" value="' + initData.qualification[value][index] + '" />');
}
});
} else {
// 得到对应的hidden的name值
//var hidden = fileTypeMap.get(fileType)
var uploadFileComponent = uploadFileComponentMap.get(value);
uploadFileComponent.setImage('url/showImage?filePath=' + initData.qualification[value]);
uploadFileComponent.disableUploading();

// 添加图片路径隐藏域
$('#opRegisterForm').append('<input type="hidden" id="' + uploadFileComponent.getFilePathHiddenId() + '" name="' + fileTypeMap.get(value) + '" value="' + initData.qualification[value] + '" />');
var uploadFileObj = uploadFileComponent.getUploadFileObj();

if(uploadFileComponent.isDownload(initData.qualification[value])) {
uploadFileObj.find('.upload-img-file').click(function () {
window.location.href = contextPath + 'url/register/download?fileRelativePath=' + initData.qualification[value];
})
} else {
uploadFileObj.find('.upload-img-file').click(function () {
window.open('url/merchant/manage/showImage?filePath=' + initData.qualification[value], '_blank', "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes,height=600,width=800");
})
}

}
}

});
}
}
}
})();

+function () {
init.initialize();
}();

return {
UPLOAD_FILE_TYPE : UPLOAD_FILE_TYPE,
validateUploadingFile : validateUploadingFile,
validateUploadingFileForChain : validateUploadingFileForChain,
getUploadFileComponentMap : getUploadFileComponentMap
}
})();


以上的js代码实现了图片的上传,下载,点击换图和点击查看大图(实现方法是打开一个新页面),重点应用了俩个jq插件lrz(用来上传图片)和ajaxuploadfile(上传非图片,具体上传了rar,zip和pdf文件)插件
上传图片涉及的区域比较多,分类复杂,需要根据具体的页面来进行理解,但是具体的逻辑是适用的,包含了初始化,validate插件的校验。写的比较糙,以后来完善

转载于:https://www.cnblogs.com/wyliunan/p/7688187.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

研究僵局–第1部分

我敢肯定我们都去过那里&#xff1a;太晚了&#xff0c;您饿了&#xff0c;服务器已挂起&#xff0c;或者应用程序正在以蜗牛的速度运行&#xff0c;并且有人喘着气想要您解决问题&#xff0c;然后再去解决。 您的应用程序意外挂起的可能原因之一是称为死锁的线程问题。 无需赘…

前端的学习之旅

Html学习笔记1 特殊符号&#xff1a;html中对换行缩进空格不敏感&#xff0c;都只会解析成一个空格 空格&#xff1a; < : < > :$gt; 版权符号&#xff1a;&copy&#xff1b; 表格&#xff1a;1 表示表格&#xff1a;table表示表格 tr&#xff1a;…

使用Vue.js和Axios从第三方API获取数据 — SitePoint

更多的往往不是&#xff0c;建立你的JavaScript应用程序时&#xff0c;你会想把数据从远程源或消耗一个[ API ]&#xff08;https&#xff1a;/ /恩。维基百科。org /维基/ application_programming_interface&#xff09;。我最近看了一些[公开]&#xff08;https://github.co…

区位码怎么知道点阵里的起始点_自身免疫疾病的GAPS起始饮食改良版

写这篇文章的原因如果您已经关注我的博客一段时间&#xff0c;您知道我开始使用GAPS饮食&#xff0c;然后转换到AIP饮食&#xff0c;因为我仍在努力治疗炎症和自身免疫的发作。 Katy Haldiman 有同样的经历&#xff0c;我们并不孤单。许多患有自身免疫性疾病的人在 GAPS 上挣扎…

Linux存储保护,谈谈Linux中的存储保护

谈谈Linux中的存储保护以下讨论的内容是以i386平台为基础的Linux将4G的地址划分为用户空间和内核空间两部分。在Linux内核的低版本中(2。0。X)&#xff0c;通常0-3G为用户空间&#xff0c;3G-4G为内核空间。这个分界点是可以可以改动的。正是这个分界点的存在&#xff0c;限制了…

004-JQuery属性

添加与删除属性CSS类HTML代码/文本/值添加与删除属性 attr(name|properties|key,value|fn) &#xff1a;设置或返回被选元素的属性值 removeAttr(name) &#xff1a;从每一个匹配的元素中删除name属性 prop(name|properties|key,value|fn) &#xff1a;获取在匹配的元素集中的第…

预热您的JVM –超快速生产服务器和IDE

几个月前&#xff0c;我正在阅读Java中的复杂事件处理以及实现低延迟的方法。 在我长达一个小时的研究结束时&#xff0c;我发现即使您的应用程序编写正确并且您的方法主要在0&#xff08;log n&#xff09;的时间内运行&#xff0c;并且您正在使用某些前沿的硬件解决方案&…

微信小程序APP(商超营销类)经验总结

项目介绍 这是一款主打门店营销的小程序。包括首页、门店、营销、个人设置、登录、数据统计展示、营销设置等。 本来要独立完成整个项目&#xff0c;包括前后端一套的&#xff0c;有些意外因素&#xff0c;项目临时收尾&#xff08;说明&#xff1a;只完成了前端的部分&#…

excel不显示0_Excel数字过长不能完整显示?超长数字变为0

Excel中计算规则和限制设定数值精确度为15位&#xff01;超过15位后&#xff0c;数字会显示为0excel数字超过15位&#xff0c;会显示为0&#xff0c;超过10位&#xff0c;默认采用科学计数法显示1、如何解决超长数字输入&#xff0c;全部显示问题&#xff1f;&#xff08;单元格…

Android天气预报设计

——嵌入式软件开发 名字功能模块代码行数备注谢灿辉Widget200桌面小程序李杨敏GPS定位&#xff0c;百度地图API100-150获取当前所在城市丁小芳城市选择Activity&#xff0c;天气API获取天气100-200包括数据库交互本软件是一个天气类应用软件&#xff0c;带有widget&#xff0c…

linux vi后不保存退出,linux下退出VI的方法:不保存退出

当编辑完文件&#xff0c;准备退出Vi返回到shell时&#xff0c;可以使用以下几种方法之一。在命令模式中&#xff0c;连按两次大写字母Z&#xff0c;若当前编辑的文件曾被修改过&#xff0c;则Vi保存该文件后退出&#xff0c;返回到shell&#xff1b;若当前编辑的文件没被修改过…

算法笔记_164:算法提高 最小方差生成树(Java)

目录 1 问题描述 2 解决方案 1 问题描述 问题描述给定带权无向图&#xff0c;求出一颗方差最小的生成树。输入格式输入多组测试数据。第一行为N,M&#xff0c;依次是点数和边数。接下来M行&#xff0c;每行三个整数U,V,W&#xff0c;代表连接U,V的边&#xff0c;和权值W。保证图…

番石榴分配器vs StringUtils

因此&#xff0c;我最近写了一篇有关旧的&#xff0c;可靠的Apache Commons StringUtils的文章 &#xff0c;该文章引起了一些评论&#xff0c;其中之一是Google Guava提供了更好的连接和拆分字符串的机制。 我必须承认&#xff0c;这是我尚未探索的番石榴的一个角落。 因此&am…

layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

表格展示神器之一&#xff1a;layui表格 前言&#xff1a;在写后台管理系统中使用最多的就是表格数据展示了&#xff0c;使用表格组件能提高大量的开发效率&#xff0c;目前主流的数据表格组件有bootstrap table、layui table、easyUI table等.... 博主个人比较倾向于layui&am…

算法设计与分析_算法设计与分析(第2版)第2章分治策略回顾

YI时间&#xff5c;外刊&#xff5c;MM-DFW&#xff5c;机器学习系列点击上方蓝字&#xff0c;关注给你写干货的松子茶分治策略是通用算法设计技术之一&#xff0c;很多有效的算法是它的特殊实现,顾名思义就是分而治之。一个问题能够用分治法求解的要素是问题能够按照某种方式分…

2017-2018-1 Java演绎法 第三周 作业

团队任务&#xff1a;团队展示与选题团队展示 队员学号及姓名 学号  姓名  主要负责工作  20162315  马军  日常统计&#xff0c;项目部分代码  20162316  刘诚昊  项目部分代码&#xff0c;代码质量测试  20162317  袁逸灏  组长 项目 主要 代码  201…

linux开机启动roscore,树莓派ubuntuMate系统中开机自启动ROS的launch文件

0x00 为何需要开机自启动launch文件在ROS开发后期阶段由于功能已经趋于稳定&#xff0c;因此就需要系统在一上电启动后就自动把ROS下的各节点程序加载运行&#xff0c;这样就省去了我们还得手动输入roslaunch命令来加载bringup的launch文件的操作。经过我的实际测试目前有两种方…

Oracle ADF移动世界! 你好!

您好&#xff0c;ADF Mobile&#xff0c;世界&#xff01; 您可能已经知道... ADF Mobile在这里&#xff01; 以下是一些链接&#xff0c;这些链接会让您有宾至如归的感觉。 ADF Mobile主页&#xff1a; http://www.oracle.com/technetwork/developer-tools/adf/overview/ad…

Bootstrap里的文件分别代表什么意思及其引用方法

关于Bootstrap打包的文件分别代表什么意思&#xff0c;官网也没有给出一个明确的解释&#xff0c;在网上查了一些资料&#xff0c;总价归纳了如下&#xff1a; bootstrap/ <!--主目录--> ├── css/ <!--CSS样式文件--> │ ├── bootstrap.css <!…

css 小知识点:inline/inline-block/line-height

inline: 此元素会被显示为内联元素&#xff0c;元素前后没有换行符。因此&#xff1a;无法设置宽度和高度&#xff5e; inline-block: 行内块元素。元素前后没有换行符&#xff08;CSS2.1 新增的值&#xff09; 用通俗的话讲&#xff0c;就是不独占一行的块级元素。然后拥有…