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

下面标记红色的部

//编辑文件上传 插件初始化    通过封装的方式可以 减少很多重复的代码  

//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

 

 

//编辑

1. function edit(id) {
2. $.ajax({
3. type: "Get",
4. url: "/Source/Get?id=" + id + "&_t=" + new Date().getTime(),
5. success: function (data) {
6. $("#Id").val(data.id);
7. $("#SourceName").val(data.sourceName);
8. $("#SourceType").val(data.sourceTypeEnum);
9. $("#Suffix").val(data.suffixEnum);
10. $("#SourcePath").val(data.sourcePath);
11. $("#SourceContentMD5").val(data.sourceContentMD5);
12. var divParent = $('#uploadfile').parents('.col-sm-10').empty();
13. var pwd = $("");
14. divParent.append(pwd);
15. var control = $('#uploadfile');
16. control.fileinput({
17. 'showUpload': true,
18. 'previewFileType': 'any',
19. language: 'zh',
20. allowedFileExtensions: ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'avi', 'mov', 'wmv', '3gp', 'rmvb', 'asf', 'fla', 'swf', 'apk'],
21. uploadUrl: '/Source/UploadSource',
22. allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash'],
23. overwriteInitial: true,
24. initialPreview: [$("#SourcePath").val(),],
25. initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
26. //initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
27. initialPreviewDownloadUrl: $("#SourcePath").val(),
28. initialPreviewConfig: [
29. { caption: $("#SourceName").val(), size: 827000, width: "120px", key: 1 },
30. ],
31. });
32. $('#uploadfile').on('fileselect', function (event, numFiles, label) {
33. var arr = ["image", "video", "application"];
34. var type;
35. files = $('#uploadfile').fileinput('getFileStack');
36. var index1 = label.lastIndexOf(".");
37. var index2 = label.length;
38. var suffix = label.substring(index1 + 1, index2);//后缀名
39. var name = label.substring(0, index1);
40. $("#SourceName").val(name);
41. for (var i = 0; i < arr.length; i++) {
42. if (files[0].type.indexOf(arr[i]) >= 0) {
43. if (arr[i] == "image") {
44. type = "图片";
45. }
46. else if (arr[i] == "video") {
47. type = "视频";
48. }
49. else if (arr[i] == "application") {
50. type = "apk";
51. }
52. else {
53. type = "其他";
54. }
55. break;
56. }
57. }
58. $("#SourceType").val(type);
59. $("#Suffix").val(suffix);
60. getFilemd5(files[0]);
61. }).on('fileuploaded', function (event, data, previewId, index) {
62. if (data.response.success) {
63. console.log('fileuploaded');
64. var fileurl = data.response.data;
65. var md5message = data.response.message;
66. if (fileurl) {
67. var postData = {
68. "sou": {
69. "Id": $("#Id").val(), "SourceName": $("#SourceName").val(),
70. "SourceTypeEnum": $("#SourceType").val(),
71. "SuffixEnum": $("#Suffix").val(),
72. "SourcePath": fileurl, "OrganizationID": selectedId,
73. "SourceContentMD5": md5message
74. }
75. };
76. $.ajax({
77. type: "Post",
78. url: "/Source/Edit",
79. data: postData,
80. success: function (data) {
81. if (data.success) {
82. $('#uploadfile').fileinput('clear');
83. loadTables(1, 10);
84. $("#editModal").modal("hide");
85. } else {
86. layer.tips(data.message, "#btnSave");
87. };
88. }
89. });
90. }
91. else {
92. }
93. }
94. }).on("filecleared", function (event, data, msg) {
95. $("#Id").val("0");
96. $("#SourceName").val("");
97. $("#SourceType").val("");
98. $("#Suffix").val("");
99. $("#SourcePath").val("");
100. $("#OrganizationID").val("");
101. $("#SourceContentMD5").val("");
102. }).on("fileremoved", function (event, data, msg) {
103. $("#Id").val("0");
104. $("#SourceName").val("");
105. $("#SourceType").val("");
106. $("#Suffix").val("");
107. $("#SourcePath").val("");
108. $("#OrganizationID").val("");
109. $("#SourceContentMD5").val("");
110. });
111. //var roleIds = [];
112. //if (data.userInRole) {
113. // $.each(data.userInRole, function (i, item) {
114. // roleIds.push(item.rolesID)
115. // });
116. // $("#Role").select2("val", roleIds);
117. //}
118. $("#Title").text("编辑资源")
119. $("#editModal").modal("show");
120. }
121. });
122. };

 

下面是参数初始化设置说明

function edit_image(path,con){  

        $("#upload").fileinput({  

             uploadUrl: "upload", //上传到后台处理的方法  

             uploadAsync: false, //设置同步，异步 （同步）  

             language: 'zh', //设置语言  

             overwriteInitial: false, //不覆盖已存在的图片  

            //下面几个就是初始化预览图片的配置      

             initialPreviewAsData: true,  

             initialPreviewFileType: 'image',  

             initialPreview:path , //要显示的图片的路径  

             initialPreviewConfig:con  

        });   

}

选择资源

 

jquery 代码如下：

1. var divParent = $('#uploadfile').parents('.col-sm-10').empty();
2. var pwd = $("");
3. divParent.append(pwd);
4. var control = $('#uploadfile');
5. control.fileinput({
6. 'showUpload': true,
7. 'previewFileType': 'any',
8. language: 'zh',
9. allowedFileExtensions: ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'avi', 'mov', 'wmv', '3gp', 'rmvb', 'asf', 'fla', 'swf', 'apk'],
10. uploadUrl: '/Source/UploadSource',
11. allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash'],
12. overwriteInitial: true,
13. initialPreview: [$("#SourcePath").val(),],
14. initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
15. //initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
16. initialPreviewDownloadUrl: $("#SourcePath").val(),
17. initialPreviewConfig: [
18. { caption: $("#SourceName").val(), size: 827000, width: "120px", key: 1 },
19. ],
20. });

参考链接：

http://blog.csdn.net/sinat_33750162/article/details/51497563

http://plugins.krajee.com/file-plugin-methods-demo

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