{"id":23145,"date":"2024-11-21T16:42:06","date_gmt":"2024-11-21T08:42:06","guid":{"rendered":"https:\/\/fwq.ai\/blog\/23145\/"},"modified":"2024-11-21T16:42:06","modified_gmt":"2024-11-21T08:42:06","slug":"thinkphp%e6%80%8e%e4%b9%88%e7%bb%93%e5%90%88ajaxfileupload%e5%ae%9e%e7%8e%b0ajax%e5%bc%82%e6%ad%a5%e5%9b%be%e7%89%87%e4%bc%a0%e8%be%93","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/23145\/","title":{"rendered":"Thinkphp\u600e\u4e48\u7ed3\u5408ajaxFileUpload\u5b9e\u73b0ajax\u5f02\u6b65\u56fe\u7247\u4f20\u8f93"},"content":{"rendered":"<h3>1\u3001\u5f15\u7528\u6587\u4ef6<\/h3>\n<p>\u5148\u5f15\u5165jquery\u4e0eajaxfileupload\u63d2\u4ef6\u3002\u6ce8\u610f\u5148\u540e\u987a\u5e8f\uff0c\u8fd9\u4e2a\u4e0d\u7528\u8bf4\u4e86\uff0c\u6240\u6709\u7684\u63d2\u4ef6\u90fd\u662f\u8fd9\u6837\u3002<\/p>\n<pre>&lt;script&gt;&lt;\/script&gt;&lt;script&gt;&lt;\/script&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<h3>2\u3001HTML\u4ee3\u7801<\/h3>\n<pre>&lt;div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;\u7f29\u7565\u56fe&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;\u9009\u62e9\u56fe\u7247&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;@@##@@&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<h3>3\u3001JS\u4ee3\u7801<\/h3>\n<pre>&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;\n\t    $(function(){\n\t        $(\"#btn_thumb\").click(function(){\n\t            $(\"#file_thumb\").click();\n\t        });\n\n\t        \/\/\u5f02\u6b65\u4e0a\u4f20\n\t        $(\"body\").delegate(&#039;#file_thumb&#039;, &#039;change&#039;, function(){\n\t            var filepath = $(\"input[name=&#039;thumb&#039;]\").val();\n\t            var arr = filepath.split(&#039;.&#039;);\n\t            var ext = arr[arr.length-1];\n\t            \/\/alert(filepath);exit();\n\n\t            if(&#039;gif|jpg|png|bmp&#039;.indexOf(ext)&gt;=0){\n\t                $.ajaxFileUpload({\n\t                  url: &#039;\/admin\/slide\/upload_image&#039;,\n\t                  secureurl: false,\n\t                  fileElementId: &#039;file_thumb&#039;, \/\/file\u6807\u7b7eID\n\t                  dataType: &#039;json&#039;, \/\/\u8fd4\u56de\u6570\u636e\u7c7b\u578b\n\t                  data:{name:&#039;thumb&#039;},\n\t                  success:function (data,status){\n\t                      $(\"#info_thumb\").val(data);\n\t                      $(\"#show_thumb\").attr(&#039;src&#039;,&#039;\/uploads\/images\/&#039;+data);\n\t                      $(\"#info_thumb\").focus();\n\t                  },\n\t                  complete:function (XMLHttpRequest){\n\n\t                  },\n\t                  error:function (data,status,e){\n\t                      layer.alert(&#039;\u4e0a\u4f20\u5931\u8d25!&#039;);\n\t                  },\n\t              });\n\t            } else {\n\t                \/\/\u6e05\u7a7afile\n\t                $(\"#file_thumb\").val(\"\");\n\t                layer.alert(&#039;\u8bf7\u4e0a\u4f20\u5408\u9002\u7684\u56fe\u7247\u7c7b\u578b!&#039;);\n\t            }\n\n\t        });\n\t    });\n    &lt;\/script&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<h3>4\u3001\u540e\u53f0\u5904\u7406\uff08PHP\uff09<\/h3>\n<pre>&nbsp;&nbsp;&nbsp;&nbsp;\/\/\u5355\u6587\u4ef6\uff08\u5305\u542b\u5355\u6587\u4ef6\uff09\u5f02\u6b65\u4e0a\u4f20\n&nbsp;&nbsp;&nbsp;&nbsp;public&nbsp;function&nbsp;upload_image(){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/\u56fe\u7247\u4e0a\u4f20\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$file&nbsp;=&nbsp;request()-&amp;gt;file(input('name'));\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$info&nbsp;=&nbsp;$file-&amp;gt;move(ROOT_PATH&nbsp;.&nbsp;'public\/uploads\/images');\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($info)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;json_encode($info-&amp;gt;getSaveName());\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<h3>5\u3001\u524d\u53f0\u8c03\u7528<\/h3>\n<pre>&lt;div&gt;\n&nbsp;&nbsp;&lt;ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;{volist&nbsp;name=\"data\"&nbsp;id=\"vo\"}\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;\n&lt;a&gt;&nbsp;@@##@@&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{$vo.title}&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;{\/volist}\n&nbsp;&nbsp;&lt;\/ul&gt;\n&lt;\/div&gt;<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236<br \/>\n<img><br \/>\n<img> <\/p>\n<p>\u4ee5\u4e0a\u5c31\u662fThinkphp\u600e\u4e48\u7ed3\u5408ajaxFileUpload\u5b9e\u73b0ajax\u5f02\u6b65\u56fe\u7247\u4f20\u8f93\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1\u3001\u5f15\u7528\u6587\u4ef6 \u5148\u5f15\u5165jquery\u4e0eajaxfileupload\u63d2\u4ef6\u3002\u6ce8\u610f\u5148\u540e\u987a\u5e8f\uff0c\u8fd9\u4e2a\u4e0d\u7528\u8bf4\u4e86\uff0c\u6240\u6709\u7684\u63d2\u4ef6\u90fd\u662f\u8fd9\u6837\u3002 &lt;script&gt;&lt;\/script&gt;&lt;script&gt;&lt;\/script&gt; \u767b\u5f55\u540e\u590d\u5236 2\u3001HTML\u4ee3\u7801 &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;\u7f29\u7565\u56fe&lt;\/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;\u9009\u62e9\u56fe\u7247&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;@@##@@&lt;\/div&gt; &lt;\/div&gt; \u767b\u5f55\u540e\u590d\u5236 3\u3001JS\u4ee3\u7801 &nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt; $(function(){ $(&#8220;#btn_thumb&#8221;).click(function(){ $(&#8220;#file_thumb&#8221;).click(); }); \/\/\u5f02\u6b65\u4e0a\u4f20 $(&#8220;body&#8221;).delegate(&#039;#file_thumb&#039;, &#039;change&#039;, function(){ var filepath = $(&#8220;input[name=&#039;thumb&#039;]&#8221;).val(); var arr = filepath.split(&#039;.&#039;); var ext = arr[arr.length-1]; \/\/alert(filepath);exit(); if(&#039;gif|jpg|png|bmp&#039;.indexOf(ext)&gt;=0){ $.ajaxFileUpload({ url: &#039;\/admin\/slide\/upload_image&#039;, secureurl: false, fileElementId: &#039;file_thumb&#039;, \/\/file\u6807\u7b7eID [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-23145","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/23145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=23145"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/23145\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=23145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=23145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=23145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}