當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片

發布時間：2025/7/14 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 bootstrap-fileinput上传文件的插件使用总结----编辑已成功上传过的图片小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

http://plugins.krajee.com/file-plugin-methods-demo 具體操作

http://plugins.krajee.com/file-preview-management-demo

bootstrap-fileinput上傳文件的插件使用總結----編輯已成功上傳過的圖片

這里所講述的是：編輯已成功上傳過的圖片

?參考：Initial Preview Data??http://plugins.krajee.com/file-preview-management-demo

下面標記紅色的部

<script src="/path/to/js/plugins/sortable.min.js"></script>  <script src="/path/to/js/plugins/purify.min.js"></script> <script src="/path/to/js/fileinput.js"></script><div class="file-loading"><input id="input-pd" name="input-pd[]" type="file" multiple> </div> <script> $("#input-pd").fileinput({uploadUrl: "/file-upload-batch/1",uploadAsync: false,minFileCount: 2,maxFileCount: 5,overwriteInitial: false,initialPreview: [// IMAGE DATA"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",// IMAGE DATA"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg",// VIDEO DATA"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4",// OFFICE WORD DATA'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleDOCFile_100kb.doc',// OFFICE EXCEL DATA'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SampleXLSFile_38kb.xls',// OFFICE POWERPOINT DATA'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/SamplePPTFile_500kb.ppt',// TIFF IMAGE FILE'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/multipage_tiff_example.tif',// ADOBE ILLUSTRATOR FILE'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_ai.ai',// ENCAPSULATED POST SCRIPT FILE'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/sample_eps.eps',// PDF DATA'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/pdf-sample.pdf',// TEXT DATA"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris ut libero fermentum feugiat eu et dui. Mauris condimentum rhoncus enim,
　　　　　　sed semper neque vestibulum id. Nulla semper,
　　　　　　turpis ut consequat imperdiet, enim turpis aliquet orci, eget venenatis elit sapien non ante. Aliquam neque ipsum, rhoncus id ipsum et,
　　　　　　volutpat tincidunt augue. Maecenas dolor libero, gravida nec est at, commodo tempor massa. Sed id feugiat massa. Pellentesque at est eu ante aliquam viverra ac sed est.",// HTML DATA'<div class="text-center">' + '<h3>Lorem Ipsum</h3>' + '<p><em>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</em></p>' + '<h5><small>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</small></h5>' + '<hr>' + '</div>' + '<div class="text-justify">' + '<p>' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.
　　　　　　Sed convallis convallis dolor sed dignissim. Phasellus euismod mauris vel dolor maximus,
　　　　　　sed fermentum mauris lobortis. Aliquam luctus, diam in luctus egestas,
　　　　　　magna lacus luctus libero, scelerisque mattis ante dolor ac nunc.
　　　　　　Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse varius orci ultricies massa euismod,
　　　　　　at semper turpis fermentum. Quisque vitae augue vel lectus viverra facilisis.
　　　　　Class aptent taciti sociosqu ad litora torquent per conubia nostra,
　　　　　　per inceptos himenaeos. Nulla lacinia molestie diam,
　　　　　　et volutpat nunc bibendum a. Cras a est sed augue commodo accumsan quis vitae nisi.' + '</p>' + '<p>' + 'Nunc sit amet metus et dui aliquet feugiat. Praesent lobortis,
　　　　　　ipsum et elementum dignissim, urna libero fringilla justo, at tincidunt nisi mi sed mi.
　　　　　　Integer vel est porttitor, tempor tortor non, lobortis felis. Curabitur porttitor nisi et volutpat iaculis. Fusce nec feugiat lectus,
　　　　　　vitae ullamcorper lorem. Ut ultrices nunc imperdiet placerat malesuada. Proin commodo erat in egestas maximus.' + '</p>' +'</div>'],initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markupinitialPreviewFileType: 'image', // image is the default and can be overridden in config belowinitialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}',
　　// includes the dynamic `filename` tag to be replaced for each configinitialPreviewConfig: [{caption: "Desert.jpg", size: 827000, width: "120px", url: "/file-upload-batch/2", key: 1},{caption: "Lighthouse.jpg", size: 549000, width: "120px", url: "/file-upload-batch/2", key: 2}, { type: "video", size: 375000,filetype: "video/mp4",caption: "KrajeeSample.mp4", url: "/file-upload-batch/2",key: 3,downloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/small.mp4', // override urlfilename: 'KrajeeSample.mp4' // override download filename}, {type: "office", size: 102400, caption: "SampleDOCFile_100kb.doc", url: "/file-upload-batch/2", key: 4}, {type: "office", size: 45056, caption: "SampleXLSFile_38kb.xls", url: "/file-upload-batch/2", key: 5}, {type: "office", size: 512000, caption: "SamplePPTFile_500kb.ppt", url: "/file-upload-batch/2", key: 6}, {type: "office", size: 811008, caption: "multipage_tiff_example.tif", url: "/file-upload-batch/2", key: 7}, {type: "office", size: 375808, caption: "sample_ai.ai", url: "/file-upload-batch/2", key: 8}, {type: "office", size: 40960, caption: "sample_eps.eps", url: "/file-upload-batch/2", key: 9}, {type: "pdf", size: 8000, caption: "About.pdf", url: "/file-upload-batch/2", key: 10, downloadUrl: false}, // disable download{type: "text", size: 1430, caption: "LoremIpsum.txt", url: "/file-upload-batch/2", key: 11, downloadUrl: false}, // disable download{type: "html", size: 3550, caption: "LoremIpsum.html", url: "/file-upload-batch/2", key: 12, downloadUrl: false} // disable download],purifyHtml: true, // this by default purifies HTML data for previewuploadExtraData: {img_key: "1000",img_keywords: "happy, places"} }).on('filesorted', function(e, params) {console.log('File sorted params', params); }).on('fileuploaded', function(e, params) {console.log('File uploaded params', params); }); </script>

//編輯文件上傳?插件初始化????通過封裝的方式可以?減少很多重復的代碼??

//initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
initialPreviewDownloadUrl: $("#SourcePath").val(),
initialPreviewConfig: [{ caption: $("#SourceName").val(), size: 827000, width: "120px",url: "/source/delete",key: 1 },], 額外數據上文中的uploadExtraData

//編輯

function edit(id) {

$.ajax({

type: "Get",

url: "/Source/Get?id=" + id + "&_t=" + new Date().getTime(),

success: function (data) {

$("#Id").val(data.id);

$("#SourceName").val(data.sourceName);

$("#SourceType").val(data.sourceTypeEnum);

$("#Suffix").val(data.suffixEnum);

$("#SourcePath").val(data.sourcePath);

$("#SourceContentMD5").val(data.sourceContentMD5);

var divParent = $('#uploadfile').parents('.col-sm-10').empty();

var pwd = $("<input id='uploadfile' type='file'>");

divParent.append(pwd);

var control = $('#uploadfile');

control.fileinput({

'showUpload': true,

'previewFileType': 'any',

language: 'zh',

allowedFileExtensions: ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'avi', 'mov', 'wmv', '3gp', 'rmvb', 'asf', 'fla', 'swf', 'apk'],

uploadUrl: '/Source/UploadSource',

allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash'],

overwriteInitial: true,

initialPreview: [$("#SourcePath").val(),],

initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup

//initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config

initialPreviewDownloadUrl: $("#SourcePath").val(),

initialPreviewConfig: [

{ caption: $("#SourceName").val(), size: 827000, width: "120px", key: 1 },

});

$('#uploadfile').on('fileselect', function (event, numFiles, label) {

var arr = ["image", "video", "application"];

var type;

files = $('#uploadfile').fileinput('getFileStack');

var index1 = label.lastIndexOf(".");

var index2 = label.length;

var suffix = label.substring(index1 + 1, index2);//后綴名

var name = label.substring(0, index1);

$("#SourceName").val(name);

for (var i = 0; i < arr.length; i++) {

if (files[0].type.indexOf(arr[i]) >= 0) {

if (arr[i] == "image") {

type = "圖片";

}

else if (arr[i] == "video") {

type = "視頻";

}

else if (arr[i] == "application") {

type = "apk";

}

else {

type = "其他";

}

break;

}

$("#SourceType").val(type);

$("#Suffix").val(suffix);

getFilemd5(files[0]);

}).on('fileuploaded', function (event, data, previewId, index) {

if (data.response.success) {

console.log('fileuploaded');

var fileurl = data.response.data;

var md5message = data.response.message;

if (fileurl) {

var postData = {

"sou": {

"Id": $("#Id").val(), "SourceName": $("#SourceName").val(),

"SourceTypeEnum": $("#SourceType").val(),

"SuffixEnum": $("#Suffix").val(),

"SourcePath": fileurl, "OrganizationID": selectedId,

"SourceContentMD5": md5message

}

};

$.ajax({

type: "Post",

url: "/Source/Edit",

data: postData,

success: function (data) {

if (data.success) {

$('#uploadfile').fileinput('clear');

loadTables(1, 10);

$("#editModal").modal("hide");

} else {

layer.tips(data.message, "#btnSave");

};

}

});

}

else {

}

}).on("filecleared", function (event, data, msg) {

$("#Id").val("0");

$("#SourceName").val("");

$("#SourceType").val("");

$("#Suffix").val("");

$("#SourcePath").val("");

$("#OrganizationID").val("");

$("#SourceContentMD5").val("");

}).on("fileremoved", function (event, data, msg) {

$("#Id").val("0");

$("#SourceName").val("");

$("#SourceType").val("");

$("#Suffix").val("");

$("#SourcePath").val("");

$("#OrganizationID").val("");

$("#SourceContentMD5").val("");

});

//var roleIds = [];

//if (data.userInRole) {

// $.each(data.userInRole, function (i, item) {

// roleIds.push(item.rolesID)

// });

// $("#Role").select2("val", roleIds);

//}

$("#Title").text("編輯資源")

$("#editModal").modal("show");

}

});

};

下面是參數初始化設置說明

function?edit_image(path,con){??

????????$("#upload").fileinput({??

?????????????uploadUrl:?"upload",?//上傳到后臺處理的方法??

?????????????uploadAsync:?false,?//設置同步，異步?（同步）??

?????????????language:?'zh',?//設置語言??

?????????????overwriteInitial:?false,?//不覆蓋已存在的圖片??

????????????//下面幾個就是初始化預覽圖片的配置??????

?????????????initialPreviewAsData:?true,??

?????????????initialPreviewFileType:?'image',??

?????????????initialPreview:path?,?//要顯示的圖片的路徑??

?????????????initialPreviewConfig:con??

????????});???

}

接下來?通過ajax向后臺請求對應的編輯的圖片數據組裝數組傳入到?上面的方法中??

就可以在頁面上顯示了??

注：在?ajax中?初始化?fileinput?是配置參數是不起作用的??需要?先銷毀，再初始化??

1、銷毀fileinput??見官網?http://plugins.krajee.com/file-plugin-methods-demo??

??$("#upload").fileinput('destroy');??

?????//初始化方法???

????????edit_image();??

相關配置見官網??

<a?target=_blank?href="http://plugins.krajee.com/file-input-ajax-demo/3"?target="_blank">點擊打開鏈接</a>?

2、銷毀fileinput另外一種是先根據上傳控件找到上傳控件的父節點，然后刪除上傳控件節點，然后再重新創建一個上傳控件，并添加到父節點中，

html?代碼如下：

</div>

jquery 代碼如下：