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'>";}//辦公文檔officeelse 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

總結

以上是生活随笔為你收集整理的项目中文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。