图片和文件上传js剖析
Posted kim
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片和文件上传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="/app/yqt/op/chain/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);
});
}
//app/yqt/op/chain/register/download 下载图片路径
///app/yqt/op/chain/register/uploadImg 上传图片路径
//app/yqt/op/chain/register/uploadFile 上传文件（zip，rar，pdf）路径
// 上传文件
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 +"/app/yqt/op/chain/register/uploadFile",
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 + ‘/app/yqt/op/chain/register/download?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 + ‘/app/yqt/op/chain/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(‘/yqt-portal-app/app/yqt/merchant/manage/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(‘/yqt-portal-app/app/yqt/merchant/manage/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 + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value][index];
})
} else {
uploadFileObj.find(‘.upload-img-file‘).click(function () {
window.open(‘/yqt-portal-app/app/yqt/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 if (UPLOAD_FILE_TYPE.OPTIONAL == value) {// 这个是资质信息
$.each(optionalUploadFileComponent, function (index, component) {
if(initData.qualification[value][index]) {
component.setImage(‘/yqt-portal-app/app/yqt/merchant/manage/showImage?filePath=‘ + initData.qualification[value][index]);
component.disableUploading();
//$(‘.upload-file-show‘).click(function(){
// window.open(‘/yqt-portal-app/app/yqt/merchant/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 + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value][index];
})
} else {
uploadFileObj.find(‘.upload-img-file‘).click(function () {
window.open(‘/yqt-portal-app/app/yqt/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(‘/yqt-portal-app/app/yqt/merchant/manage/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 + ‘/app/yqt/op/chain/register/download?fileRelativePath=‘ + initData.qualification[value];
})
} else {
uploadFileObj.find(‘.upload-img-file‘).click(function () {
window.open(‘/yqt-portal-app/app/yqt/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插件的校验。写的比较糙，以后来完善
以上是关于图片和文件上传js剖析的主要内容，如果未能解决你的问题，请参考以下文章
.net core实现单文件上传多文件上传js提交实现文件上传图片预览
富文本框插件KindEditor 上传图片不走后台直接js上传文件到oss要怎么处理？