项目中文件上传

1.js封装

//初始化fileinput控件（第一次初始化）CtrlName是文件控件的id,uploadurl是图片上传路径并且所有上传路径都是"../../Common/FileUpload.ashx?FileType=巡检报告"只是filetype后的参数就是各自建的图片文件夹名称，
//allowedFileExtensions接收的文件后缀格式（[txtt,png,gif]）filepathArry是上传文件对象
function initFileInput(ctrlName, uploadUrl, allowedFileExtensions, filepathArray)
{
    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: uploadUrl, //上传的地址
        overwriteInitial: false,
        allowedFileExtensions: allowedFileExtensions,//接收的文件后缀
        dropZoneEnabled: false,//是否显示拖拽区域
        initialPreviewAsData: false,
        initialPreviewFileType: 'image',
        previewFileIcon: '<i class="fa fa-file"></i>', 
    })
    loadFileInput(ctrlName, filepathArray);
}
文件编辑
function refreshFileInputs(ctrlName, uploadUrl, allowedFileExtensions, initialPreview, initialPreviewConfig, filepathArray)
{
    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: uploadUrl, //上传的地址
        overwriteInitial: false,
        allowedFileExtensions: allowedFileExtensions,//接收的文件后缀
        dropZoneEnabled: false,//是否显示拖拽区域
        initialPreviewAsData: false,
        initialPreview: initialPreview,//显示图片和文件
        initialPreviewConfig: initialPreviewConfig,//设置图片和文件
        initialPreviewFileType: 'image',
        previewFileIcon: '<i class="fa fa-file"></i>',
    })
    loadFileInput(ctrlName, filepathArray);
}
//通用方法
function loadFileInput(ctrlName, filepathArray) {
    var control = $('#' + ctrlName);
    control.on("fileuploaded", function (event, data, previewId, index) {
        var obj = eval('(' + data.jqXHR.responseText + ')');
        var filename = obj.initialPreviewConfig[0].caption;
        var filepath = obj.initialPreviewConfig[0].key;
        var fileInfo = new Object();
        fileInfo.FILENAME = filename;
        fileInfo.FILEPATH = filepath;
        filepathArray.push(fileInfo);
    }).on('filedeleted', function (event, key, jqXHR, data) {
        for (var i = 0; i < filepathArray.length; i++) {
            if (filepathArray[i].FILEPATH == key) {
                filepathArray.splice(i, 1)
            }
        }
    });
}
//展示
function showFilePreview(files,Name,Path)
{
    var fileViewArray = new Array();
    for (var i = 0; i < files.length; i++)
    {
        var fileName = eval('files[i].' + Name);
        //视频展示详细
        if( fileName.indexOf(".mp4") > 0)
        {
            fileViewArray[i]="<video class='kv-preview-data file-preview-video' controls='' style='width:213px;height:160px;'>" 
                + "<source src=" + "'" + eval('files[i].' + Path) + "'" + "\" class=\"kv-preview-data file-preview-image\" type='video/mp4'>" + "</video>"
        }
        //文档pdf,
        else if (fileName.indexOf(".pdf") > 0)
        {
            fileViewArray[i] = "<embed src=" + "'" + eval('files[i].' + Path) + "'" + "\" class=\"kv-preview-data file-preview-pdf file-zoom-detail\" type='application/pdf'  internalinstanceid='30'>";
        }
        //办公文档office
        else if (fileName.indexOf(".txt") > 0 || fileName.indexOf(".xml") > 0 ||fileName.indexOf(".xlsx") > 0 || fileName.indexOf(".xls") > 0)
        {
            fileViewArray[i] = "<div class='file-preview-text'>" +
                    "<h2><i class='glyphicon glyphicon-file'></i></h2>" +
                         fileName + "</div>";
        }
        //图片展示
        else
        {
            fileViewArray[i] = "<img src=" + "'" + eval('files[i].' + Path) + "'" + "\" class=\"kv-preview-data file-preview-image\">";
        }
    }
    return fileViewArray;
}
//删除
function setPreviewConfig(files,id,url,path)
{
    var previewConfig = new Array();
    for (var i = 0; i < files.length; i++)
    {
        var tjson = {
            caption: "", // 展示的文件名  
            width: '100px',
            url: url + ((path == undefined || path == "") ? "" : eval('files[i].' + path)),
            key: eval('files[i].' + id),
            extra: { id: eval('files[i].' + id) }// 删除时Ajax向后台传递的参数
        };
        previewConfig[i] = tjson;
    }
    return previewConfig;
}

2.前端页面

 var filepathArray = new Array(); 
$(function(){
//初始化上传控件

initFileInput("ChargingStandardFile", "../../Common/FileUpload.ashx?FileType=存储文件夹名称&ConvertToPdf=fasle", ['jpg', 'png', 'gif','文件格式'], filepathArray);

})

//页面加载方法中显示

//添加页面传递参数（上传文件id,上传路径,上传图片格式,展示图片，设置删除图片,上传图片对象）注意的是展示图片和设置删除图片在做编辑时候需要传递参数
refreshFileInputs("ChargingStandardFile", "../../Common/FileUpload.ashx?FileType=收费标准文件&ConvertToPdf=fasle", ['jpg', 'png', 'gif'], showFilePreview(purchase.Attachmentfile, 'AttachmentName', 'AttachmentAddress'), setPreviewConfig(purchase.Attachmentfile, 'AttachmentID', '/PurchaseManager/PurchaseManager/DeleteFile?url=', 'AttachmentAddress'), filepathArray);

 

//提交方法

var DIMGArr = new Array();
for (var i = 0; i < filepathArray.length; i++) {
var supplierContractFileInfo = new Object();
supplierContractFileInfo.AttachmentName = filepathArray[i].FILENAME;
supplierContractFileInfo.AttachmentAddress = filepathArray[i].FILEPATH;
supplierContractFileInfo.ParamCode = 1;
DIMGArr.push(supplierContractFileInfo);
}

$.ajax({

...

})

3.后台控制器实现方法

//后台控制器实现方法

if (chargingStandardFileArrayFile != null)
{
for (int i = 0; i < chargingStandardFileArrayFile.Count; i++)
{
var path1 = chargingStandardFileArrayFile[i].AttachmentAddress.Split('.');
string FileFormat1 = chargingStandardFileArrayFile[i].AttachmentAddress.Split('.')[chargingStandardFileArrayFile[i].AttachmentAddress.Split('.').Length - 1];//得到文件格式
if (FileFormat1 == "doc" || FileFormat1 == "docx")
{
FileFormat1 = "pdf";
chargingStandardFileArrayFile[i].AttachmentAddress = path1[0] + "." + FileFormat1;
}
}
foreach (var chargingStandardFile in chargingStandardFileArrayFile)
{
chargingStandardFile.EquipmentpPrchaseID = equipmentOverviewInfo.EquipmentpPrchaseID;
_Attachment.Add(chargingStandardFile);
}
}

　　

转载于:https://www.cnblogs.com/A-R-E-S/p/10487577.html