{"id":6541,"date":"2018-02-24T15:32:35","date_gmt":"2018-02-24T07:32:35","guid":{"rendered":"https:\/\/sdeno.com\/?p=6541"},"modified":"2021-01-28T16:31:48","modified_gmt":"2021-01-28T08:31:48","slug":"%e5%8a%9f%e8%83%bd%e5%bc%ba%e5%a4%a7%e7%9a%84%e4%b8%8a%e4%bc%a0%e6%8f%92%e4%bb%b6fileinput-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=6541","title":{"rendered":"\u63a8\u8350\uff1a\u529f\u80fd\u5f3a\u5927\u7684\u4e0a\u4f20\u63d2\u4ef6fileinput.js"},"content":{"rendered":"<p>jquery \u4e0a\u4f20 \u62d6\u62fd\u4e0a\u4f20 \u63a8\u8350<\/p>\n<p>&nbsp;<\/p>\n<figure class=\"mdx-lazyload-container\" style=\"max-width:426px\"><div style=\"padding-top:73.943661971831%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"426\" height=\"315\" class=\"alignnone size-full wp-image-6544 lazyload\" title=\"\u63a8\u8350\uff1a\u529f\u80fd\u5f3a\u5927\u7684\u4e0a\u4f20\u63d2\u4ef6fileinput.js\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2018\/02\/upload_files.png\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2018\/02\/upload_files.png\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2018\/02\/upload_files.png 426w, https:\/\/sdeno.com\/wp-content\/uploads\/2018\/02\/upload_files-300x222.png 300w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\"><\/figure>\n<p>\u90e8\u7f72\uff1a<\/p>\n<pre>&lt;link href=\"bootstrap.min.css\" type=\"text\/css\" rel=\"stylesheet\"&gt;\r\n &lt;link href=\"fileinput.min.css\" type=\"text\/css\" rel=\"stylesheet\"&gt;\r\n &lt;link href=\"fileinput-rtl.min.css\" type=\"text\/css\" rel=\"stylesheet\"&gt;\r\n\r\n\r\n &lt;script src=\"jquery.min.js\"&gt;&lt;\/script&gt;\r\n &lt;script src=\"bootstrap.min.js\"type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n &lt;script src=\"fileinput.js\"type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n &lt;script src=\"zh.min.js\"&gt;&lt;\/script&gt;\r\n\r\n\r\n&lt;form enctype=\"<span style=\"color: #ff0000;\">multipart\/form-data<\/span>\"&gt;\r\n &lt;input <span style=\"color: #ff0000;\">name=\"pic\"<\/span> id=\"input-44\" type=\"file\" multiple&gt;  \/\/name=\"image_data[]\"  \u4e00\u6b21\u6027\u4e0a\u4f20\u591a\u56fe\u7247\r\n                                                        \/\/\u591a\u56fe\u4e0a\u4f20 \u00a0\u8981\u5c06ajax\u8bbe\u7f6e\u6210 \u00a0\u540c\u6b65\r\n&lt;\/form&gt;\r\n\r\n\r\n\r\n\r\n<\/pre>\n<pre>&lt;script&gt;\r\n    \/\/version 4.2.7\u4ee5\u4e0a\u7248\u672c\u53ef\u4ee5\u8fd9\u4e48\u5199\r\n\r\n    $(document).on('ready', function() {\r\n        $(\"#input-44\").fileinput({\r\n            uploadUrl: 'http:\/\/www.baidu.com',  \/\/\u8fd8\u5199\u5177\u4f53\u4e0a\u4f20\u5730\u5740\u624d\u663e\u793a\u53ef\u62d6\u62fd\u533a\u57df\r\n            language: 'zh', \/\/\u8bbe\u7f6e\u8bed\u8a00\r\n            allowedFileExtensions: ['jpg', 'gif', 'png'],\/\/\u63a5\u6536\u7684\u6587\u4ef6\u540e\u7f00\r\n            uploadAsync: true, \/\/\u9ed8\u8ba4\u5f02\u6b65\u4e0a\u4f20\r\n            showUpload:true, \/\/\u662f\u5426\u663e\u793a\u4e0a\u4f20\u6309\u94ae\r\n            showRemove :true, \/\/\u663e\u793a\u79fb\u9664\u6309\u94ae\r\n            showPreview :true, \/\/\u662f\u5426\u663e\u793a\u9884\u89c8\r\n            showCaption:true,\/\/\u662f\u5426\u663e\u793a\u957f\u6761\u6807\u9898\r\n            browseClass:\"btn btn-primary\", \/\/\u6309\u94ae\u6837\u5f0f\r\n            dropZoneEnabled: true,\/\/\u662f\u5426\u663e\u793a\u62d6\u62fd\u533a\u57df\r\n            maxFileCount:10, \/\/\u8868\u793a\u5141\u8bb8\u540c\u65f6\u4e0a\u4f20\u7684\u6700\u5927\u6587\u4ef6\u4e2a\u6570\r\n            enctype:'<span style=\"color: #ff0000;\">multipart\/form-data<\/span>',\r\n            msgFilesTooMany: \"\u9009\u62e9\u4e0a\u4f20\u7684\u6587\u4ef6\u6570\u91cf({n}) \u8d85\u8fc7\u5141\u8bb8\u7684\u6700\u5927\u6570\u503c{m}\uff01\",\r\n            msgAjaxError: 'Something went wrong with the {operation} operation. Please try again later!', \/\/\u9519\u8bef\u63d0\u793a\r\n            uploadExtraData:{\"id\": 1, \"fileName\":'123.mp3'},\/\/\u4e0a\u4f20\u643a\u5e26\u53c2\u6570\r\n            maxFileCount:10, \/\/\u8868\u793a\u5141\u8bb8\u540c\u65f6\u4e0a\u4f20\u7684\u6700\u5927\u6587\u4ef6\u4e2a\u6570\r\n            maxFileSize:0,\/\/\u5355\u4f4d\u4e3akb\uff0c\u5982\u679c\u4e3a0\u8868\u793a\u4e0d\u9650\u5236\u6587\u4ef6\u5927\u5c0f\r\n            slugCallback:function(){}, \/\/\u4e0a\u4f20\u524d\u7684\u56de\u8c03\r\n            overwriteInitial: false, \/\/false\u65f6\uff0c\u672c\u8eab\u5df2\u5b58\u5728\u7684\u9884\u89c8\u56fe\uff0c\u540e\u9762\u5728\u4e0a\u4f20\u5c31\u7ee7\u7eed\u8ffd\u52a0\u800c\u4e0d\u662f\u8986\u76d6\u539f\u6765\u7684\r\n            previewSettingsSmall:{image: {width: \"100%\", height: \"100%\", 'max-width': \"auto\",'max-height': \"auto\"}},  \/\/\u4fee\u6539\u4e4b\u524d\u4e0a\u4f20\u7684\u9884\u89c8\u56fe\r\n            previewSettings:{image: {width: \"100%\", height: \"100%\", 'max-width': \"auto\",'max-height': \"auto\"}},  \/\/\u4fee\u6539\u521a\u521a\u4e0a\u4f20\u7684\u9884\u89c8\u56fe\r\n\r\n            initialPreview:['&lt;img src=\"1.jpg\"&gt;','&lt;img src=\"2.jpg\"&gt;'], \/\/\u521d\u59cb\u5316\u663e\u793a\u51fa\u9884\u89c8\u56fe\r\n            \/\/initialPreviewAsData: true \/\/\u4e3atrue\u65f6\uff0cinitialPreview\u6570\u7ec4\u91cc\u9762\u7684html\u6807\u7b7e\u5c31\u4e0d\u4f1a\u89e3\u6790\uff0c\u76f4\u63a5\u663e\u793a\u6570\u636e\u4e86\r\n            initialPreviewConfig: [ \/\/\u521d\u59cb\u5316\u9884\u89c8\u56fe\u65f6\uff0c\u4e3a\u9884\u89c8\u56fe\u8bbe\u7f6e\u5c5e\u6027\r\n             {\r\n               caption: '\u540d\u79f01',\/\/ \u9884\u89c8\u56fe\u5c55\u793a\u7684\u56fe\u7247\u540d\u79f0\r\n               width: '120px',\/\/ \u56fe\u7247\u9ad8\u5ea6\r\n               url: 'http:\/\/localhost\/1.php',\/\/\u5220\u9664\u9884\u89c8\u56fe\u7247\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u7684\u5fc5\u987b\u662fjson\u5426\u5219\u5220\u9664\u9884\u89c8\u56fe\u7684\u6548\u679c\u5c31\u6ca1\u6709\r\n               key: '1a',\/\/ \u5220\u9664\u6309\u94ae\u4f1a\u6dfb\u52a0data-key=\"1a\"\uff0c\u540c\u65f6\u4e5f\u4f1a\u63d0\u4ea4\u7ed9\u540e\u53f0key:'1a'\u503c\r\n               extra: {id: 11} \/\/\u8c03\u7528\u5220\u9664\u8def\u5f84\u6240\u4f20\u53c2\u6570\u00a0\r\n             },\r\n             {\r\n               caption: '\u540d\u79f02',\r\n               width: '120px',\r\n               url: 'http:\/\/localhost\/1.php',\r\n               key: '2a',\r\n               extra: {id: 22}\r\n             }\r\n            ]\r\n        }).on(\"filebatchselected\", function(event, files) {  \/\/\u9009\u4e2d\u8981\u4e0a\u4f20\u7684\u6587\u4ef6\u540e\u56de\u8c03\r\n           $(this).fileinput(\"upload\");  \/\/\u81ea\u52a8\u4e0a\u4f20\r\n\r\n        }).on(\"fileuploaded\", function(event, data) {\r\n            if(data.response)\r\n            {\r\n                alert('\u5904\u7406\u6210\u529f');\r\n            }\r\n        }).on('filedeleted', function() {\r\n             console.log(1111) \/\/\u5220\u9664\u9884\u89c8\u56fe\u7684\u56de\u8c03\r\n        }).on('filebatchpreupload', function (event, data) { \/\/\u8be5\u65b9\u6cd5\u5c06\u5728\u4e0a\u4f20\u4e4b\u524d\u89e6\u53d1\r\n           \r\n        });\r\n\r\n        \/\/filesuccessremove  \u5220\u9664\u521a\u521a\u4e0a\u4f20\u6210\u529f\u56fe\u7247\u7684\u56de\u8c03\r\n        \/\/filebatchuploadcomplete \u6587\u4ef6\u5168\u90e8\u90fd\u4e0a\u4f20\u5b8c\u6210\u624d\u56de\u8c03\r\n        \/\/fileuploaderror  \u4e0a\u4f20\u6587\u4ef6\u9519\u8bef\u540e\u56de\u8c03\r\n        \/\/filebatchpreupload  \u4e0a\u4f20\u524d\u56de\u8c03\r\n        \/\/\u8fd8\u6709\u66f4\u591a\u4f30\u8ba1\u4f60\u81ea\u5df1\u770b\u6e90\u7801\r\n    });\r\n&lt;\/script&gt;<\/pre>\n<p><a href=\"https:\/\/segmentfault.com\/a\/1190000018477200\" target=\"_blank\" rel=\"noopener\">https:\/\/segmentfault.com\/a\/1190000018477200<\/a><\/p>\n<p><span style=\"color: #ff0000;\">\u52a8\u6001\u751f\u6210\u6dfb\u52a0\u9884\u89c8\u56fe<\/span><\/p>\n<p>\u9884\u89c8\u56fe\u52a8\u6001\u589e\u3001\u5220\u5176\u5b9e\u662f\u5bf9\u5c5e\u6027initialPreview\u3001initialPreviewConfig\u7684\u64cd\u4f5c\uff0c\u4e4b\u540e\u8fd8\u9700\u8981\u6253\u5176\u5237\u65b0\u3002<\/p>\n<pre>$(\"#input-44\").fileinput('refresh', {\r\n   initialPreview: [ \/\/\u9884\u89c8\u56fe\u7247\u7684\u8bbe\u7f6e\r\n       \"&lt;img src='\" + imageurl + \"' class='file-preview-image' alt='\u8096\u50cf\u56fe\u7247' title='\u8096\u50cf\u56fe\u7247'&gt;\",\r\n   ],\r\n});<\/pre>\n<p>\u5982\u679c\u5bf9\u914d\u7f6e\u8fdb\u884c\u64cd\u4f5c\u540e\u65e0\u6cd5\u6b63\u5e38\u663e\u793a\u53ef\u4ee5\u5c1d\u8bd5\u76d1\u542c\u6267\u884crefresh\u65b9\u6cd5<\/p>\n<p>&nbsp;<\/p>\n<p>\u7ea2\u8272\u63d0\u793a\u8981\u6ce8\u610f\u5426\u5219\u4f1a\u9020\u6210\u4e0a\u4f20\u65e0\u6cd5\u6210\u529f<\/p>\n<p>\u6240\u6709\u5c5e\u6027\u7684\u8bbe\u7f6e\u6848\u4f8b\uff1a<a href=\"http:\/\/plugins.krajee.com\/file-input\/plugin-options#previewZoomSettings\" target=\"_blank\" rel=\"noopener\">http:\/\/plugins.krajee.com\/file-input\/plugin-options#previewZoomSettings<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u4e2d\u6587\u53c2\u8003\uff1a<a href=\"https:\/\/blog.csdn.net\/u012526194\/article\/details\/69937741\" target=\"_blank\" rel=\"noopener\">https:\/\/blog.csdn.net\/u012526194\/article\/details\/69937741<\/a><\/p>\n<p><a href=\"http:\/\/plugins.krajee.com\/file-input\" target=\"_blank\" rel=\"noopener\">http:\/\/plugins.krajee.com\/file-input<\/a><\/p>\n<p><a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2018\/02\/anli_upload.zip\">anli_upload<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n","protected":false},"excerpt":{"rendered":"<p>jquery \u4e0a\u4f20 \u62d6\u62fd\u4e0a\u4f20 \u63a8\u8350 &nbsp; \u90e8\u7f72\uff1a &lt;link href=&#8221;bootstrap.m [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6541","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/6541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6541"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/6541\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}