公眾號關注?“GitHub 熱門”

設為 “星標”，帶你了解技術圈內熱門新鮮事！

現在很多小伙伴都在搭建自己的博客，把自己的一些心得和經驗都寫在博客上面給一些新入門的朋友提供學習的途徑，想要搭建一個漂亮實用的博客其實也很簡單。

這里我給大家分享一個組件：圖片拖動上傳到文本框上傳，然后自動返回鏈接，發帖之后可以直接顯示圖片。

介紹

大家都逛過一些社區吧！大部分社區都可以直接拖拽圖片上傳， 無論是發帖和回復評論用戶體驗都很好。效果圖：

可以直接把我們想要的圖片給拖拽到文本框之中，然后返回返回鏈接。

怎么樣，是不是很厲害。今天我們一起來實現一下。

這個組件叫 Inline Attachment，然后我們把需要的文件都下載下來。

InlineAttachment 官網地址：http://git.razko.nl/InlineAttachment

下載完之后里面有一個 demo 文件夾，這里面是使用方法。里面是各種使用方法，如 原生代碼調起，jquery 調起，angularjs 調起

我們先引入幾個必備文件，它們分別在下載的組件中 src 目錄里面，jquery 得自己引入。

首先我們得有一個 textarea 文本域

然后在 JS 中有如下配置：

上面的 options 是這個組件的需要的參數, uploadUrl 是當有圖片拖拽到文本域觸發一個提交到后臺的路由，uploadFieldname 是后臺接收參數的時候 key 值：

urlText 是指圖片上傳成功后返回到文本域的值：

extraParams 是觸發提交到后臺的時候攜帶的額外參數，這里因為 laravel 框架會驗證 token 值所以我攜帶了一個 csrf_token 前端邏輯大概就是這樣，更多參數見組件文檔

后端邏輯編寫

各種主流后端語言都能實現圖片上傳，這里以 PHP 語言為例 ，唯一值得注意的是，最后的返回值是一個 json 格式的字符串。

? ?/** ? ? * 自動上傳 ? ? * ? ? * @param Request $request ? ? * @return mixed ? ? */ ? ?public function attachment(Request $request) ? { ? ? ? ?$file = $request->file('image'); ? ? ? ?// 圖片驗證 ? ? ? ?$input = array('image' => $file); ? ? ? ?$rules = array( ? ? ? ? ? ?'image' => 'image' ? ? ? ); ? ? ? ?// 自動驗證 ? ? ? ?$validator = \Validator::make($input, $rules); ? ? ? ?// 失敗處理 ? ? ? ?if ($validator->fails()) return \Response::json([ ? ? ? ? ? ?'error' => 'Please choose a picture.' ? ? ? ]); ? ? ? ?// 移動目錄地址 ? ? ? ?$destinationPath = 'uploads/'; ? ? ? ?// 獲取圖片文件名 ? ? ? ?$filename = \Auth::user()->id . '_' . time() . $file->getClientOriginalName(); ? ? ? ?// 移動圖片 ? ? ? ?$file->move($destinationPath, $filename); ? ? ? ?return \Response::json([ ? ? ? ? ? ?'filename' => '/' . $destinationPath . $filename ? ? ? ]); ? }

注意：這里返回的 json 格式中名字得和你前端值對應:

當然我這里只是把文件給上傳到了我項目之中 uploads 文件夾下，你也可以上傳到 第三方資源服務器 上，如：oss，七牛 等。

最后的效果圖：

感謝關注「GitHub 熱門」公眾號，帶你了解技術圈內熱門新鮮事！

總結

以上是生活随笔為你收集整理的图片上传组件_博客必备功能，拖拽上传图片！的全部內容，希望文章能夠幫你解決所遇到的問題。

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